步步为营-54-DOM
说明:DOM document object model 文档对象模型.将所有的标记加载到内存中,以树形结构处理
1.1 使用JavaScript操作DOM,主要包括两个部分
Browser对象:BOM 指的是window.***
Html Dom对象: 指的是document.***
1.2 BOM
1.2.1 常用的三个对话框
<script>
//01-提示框,只有一个"确定"按钮 无返回值
alert("提示框");
//02-确认框 有"确定","取消"两个按钮,"确定"返回==true,"取消"返回==false
var result = confirm("确定删除吗?");
alert(result);
//03-输入框,一个文本框+有"确定","取消"两个按钮 ;"确定"返回==输入的值,"取消"返回==null
var result2 = prompt('请输入年龄', '');
alert(result2);
</script>
1.2.2 window常用事件
1.2.2.1 onload事件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function () {
//02-常用的事件
document.getElementById("btnShow").onclick = function () {
alert(this.value);
}; } </script> </head>
<body> <input type="button" id="btnShow" value="显示"/>
</body>
window.onload
1.3 HTML_DOM
1.3.1 常用的获取对象方法
//HTML DOM 使用
//01-获取元素方法
//01-01 根据id属性获取单个节点
document.getElementById();
//01-02 根据name获取节点列表
document.getElementsByName();
//01-03 通过class名称或的节点列表
document.getElementsByClassName();
//01-04 通过tagName获取单个节点
document.getElementsByTagName();
1.3.2 常用事件
1.3.2.1 onclick事件
<body>
<input type="button" id="btnShow" value="显示"/>
<script>
//HTML DOM 使用
//02-常用的事件
document.getElementById("btnShow").onclick = function() {
alert(this.value);
}
</script>
</body>
onclick事件
1.4 动态操作节点
1.4.1 动态创建元素
document.createElement();
1.4.2 添加子节点
appendChild();
1.4.3 插入节点
insertBefore(新元素对象,原节点);
1.4.4 获取第一个元素
firstChild();
1.4.5 获取所有子节点
childNodes();
1.4.6 删除元素
removeChild(子元素对象)
1.5 获取标签对的数据
1.5.1 innerText //获取标签对内的文本 textContent(火狐浏览器)
1.5.2 innerHTML //获取标签对内的HTML
1.6 通过js操作样式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function() {
var divset = document.getElementById('divSet');
divset.style.width = "200px";
//属性中带-的怎么写
divset.style.backgroundColor = "red";
}
</script>
</head>
<body>
<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.worldColor {
color: yellow;
}
</style>
<script>
window.onload = function() {
var divset = document.getElementById('divSet');
divset.style.width = "200px";
//属性中带-的怎么写
divset.style.backgroundColor = "red";
//设置浮动效果(float是关键字)
divset.style.cssFloat = 'right';
//通过class设置属性
divset.className = 'worldColor'; }
</script>
</head>
<body>
<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
</body>
</html>
1.7 div的显示与隐藏
通过设置样式的display控制显示与隐藏.
block 表示显示,none表示隐藏
1.8 form表单的提交
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function() {
var form1 = document.getElementById('form1');
form1.onsubmit = function() {
var age = document.getElementById('txtAge').value;
if (isNaN(age)) {
alert('年龄输入有误!');
return false;
}
return true;
};
}
</script>
</head>
<body>
<form id="form1" action="提交表单.html">
<input type="text" id="txtAge" />
<input type="submit" id="submit1" />
</form>
</body>
</html>
步步为营-54-DOM的更多相关文章
- MongoDB Query
每条数据格式如下 { "_id" : ObjectId("5383298561aa33a422d8603e"), "day" : " ...
- Hibernate配置文档详解
Hibernate配置文档有框架总部署文档hibernate.cfg.xml 和映射类的配置文档 ***.hbm.xml hibernate.cfg.xml(文件位置直接放在src源文件夹即可) (在 ...
- DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记
1. childNodes nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...
- DOM example
一:DOM简介: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中, ...
- JS中级 - 01：DOM节点
1元素属性 1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...
- 解析XML文件的几种常见操作方法—DOM/SAX/DOM4j
解析XML文件的几种常见操作方法—DOM/SAX/DOM4j 一直想学点什么东西,有些浮躁,努力使自己静下心来看点东西,哪怕是回顾一下知识.看到了xml解析,目前我还没用到过.但多了解一下,加深点记忆 ...
- javascript将DOM事件处理程序封装为event.js 出现的低级错误记录
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...
- HTML5的 2D SVG和SVG DOM的学习笔记（1）
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...
- xml--通过DOM解析XML
此文章通过3个例子表示DOM方式解析XML的用法. 通过DOM解析XML必须要写的3行代码. step 1: 获得dom解析器工厂(工作的作用是用于创建具体的解析器) step 2:获得具体的dom解 ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
随机推荐
- 约束Constraints--主键约束、外键约束、唯一约束、检查约束、默认约束、NOT NULL约束、列约束与表约束、创建约束、删除约束
约束 Including Constraints 以下内容转自:https://www.cnblogs.com/wcl2017/p/7043939.html和http://blog.csdn.ne ...
- idea出现乱码问题
Intellij Idea打包工程时控制台显示乱码 这主要是maven编译时编码问题导致的.在Intellij的settings中maven的run配置中设置它的VM Options为-Darchet ...
- Matplotlib中plt.rcParams用法（设置图像细节）
import numpy as np import matplotlib.pyplot as plt from matplotlib.colors import ListedColormap %mat ...
- 基于Redisson实现分布式锁
前言 最近开发了几个微服务上线了,发现定时任务执行了很多次,查看rancher发现这几个微服务都是多实例的,也就是说定时任务执行了多次,恰好所用框架中使用的是Redisson, 正好记录下使用Redi ...
- 动态规划之Fib数列类问题应用
一,问题描述 有个小孩上楼梯,共有N阶楼梯,小孩一次可以上1阶,2阶或者3阶.走到N阶楼梯,一共有多少种走法? 二,问题分析 DP之自顶向下分析方式: 爬到第N阶楼梯,一共只有三种情况(全划分,加法原 ...
- android 获取图库中展示到界面中
layout: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...
- 有关Linux的.a、.so和.o文件(转)【原文章有些错误，自己已更改】
gcc 生成 .a静态库和 .so动态库 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库 ...
- 前端 - Ajax (1)
Ajax 主要作用 用于隐式提交,有别于input 提交时不会跳转/刷新页面. 前端: html 代码:(id) <p> <input id="user" typ ...
- BackBone结合ASP.NET MVC实现页面路由操作
1. 问题的背景 什么是页面路由操作,就是通过浏览器地址栏的标记来实现页面内部的一些操作,这些操作具有异步性和持久性.应用场景主要有页面操作过程中的添加收藏夹的操作.后退操作等过程中能完全恢复界面. ...
- 【Python】Python-基础语法学习
基础语法学习 果然学完 C++ 后再看其他语言的确有很多的共性,只需要熟悉一下python的独特语法和 C++ 中的差异就可以写出一些小的程序,而写得过程中也再次体会出python代码的精简和灵活: ...