1.概念
1.全称:Document Object Model,即文档对象模型
区别:BOM树:Browser Object Model 浏览器对象模型2.功能: DOM描绘了一个层次化的树,允许开发人员动态(CRUD)添加、删除、修改,查询页面的某一部分。
注:浏览器在解析HTML页面标记的时候,是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的窗口中。
3.关系梳理:
html ---------------根元素
标签 ---------------元素
标签内属性 ------属性
标签包括内容----文本
2.DOM树层次
document代表当前的整个文档树,通过其操作整个页面
1.访问属性:
all :获取所有的标签
images:获取所有的图片标签,可通过src属性加载图片
links:获取所有的a链接标签,可通过href属性设置超链接
理解:一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到应的对象操作对象的属性,则可以改变浏览器当前显示的内容
3.核心DOM模型
W3C DOM 标准被分为 3 个不同的部分
核心DOM - 针对任何结构化文档的标准模型
Document: 文档对象
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Comment: 注释对象
Node:节点对象,上述5个对象的父对象
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对HTML文档的标准模型
3.1Document文档对象
1.创建/获取两种方式:
window.document
document
2.四个方法
getElementById(): 根据id属性获取到的永远只是一个Node对象,其余方法获取的均是数组
getElementsByClassName() 根据Class属性获取元素(即标签)对象们,是数组,注意s
getElementsByTagName() 根据元素名称(即标签名)获取Node对象们,是数组,注意s
getElementsByName() 根据name属性值获取Node对象们,是数组,注意s
3.创建其他DOM对象:
createAttribute() :创建属性对象
createComment() : 创建注释对象,可操作注释内容
createElement() : 创建新元素结点,即标签,必须通过父节点操作(重要)
createTextNode():创建文本对象
4.属性
<body>
<input type="button" onclick="add()" value="添加" />
<script type="text/javascript">
var num = 1;
function add() {
//创建一个Node
var inputNode = document.createElement("input");
inputNode.setAttribute("type", "button");
inputNode.setAttribute("value", "按钮" + num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode);
}
</script>
</body>
实现全选/全不选功能
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本
电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本
电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll()" />全/不选<br />
<input type="checkbox" name="all" onclick="reverseAll()" />反选<br />
<input type="button" value="总金额:" onclick="getSum()" />
<span id="sumid"></span>
<script type="text/javascript">
var items = document.getElementsByName("item");
//全选,两种写法
function checkAll() {
//第一种情况:全选,全不选
var all = document.getElementsByName("all")[0];
for (var i = 0; i < items.length; i++) {
/* if(all.checked){
items[i].checked = true;
}else{
items[i].checked = false;
} */
items[i].checked = all.checked;
}
}
//反选,两种写法
function reverseAll() {
for (var i = 0; i < items.length; i++) {
/* if (items[i].checked) {
items[i].checked = false;
} else {
items[i].checked = true;
} */
items[i].checked = !items[i].checked;
}
}
function getSum(){
var sum = 0;
for(var i = 0; i < items.length; i++){
if(items[i].checked){
//因为获取到的值是String类型
sum += parseInt(items[i].value);
}
}
document.getElementById("sumid").innerHTML = "¥" + sum;
}
</script>
</body>
3.2Element元素对象
1.获取/创建:document.createElement()
2.方法:
removeAttribute() :删除属性
setAttribute("属性名", "属性值") :设置属性
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
//获取btn
var btn_set =document.getElementById("btn_set");
btn_set.onclick = function(){
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0]; element_a.setAttribute("href","https://www.baidu.com");
}
//获取btn
var btn_remove =document.getElementById("btn_remove");
btn_remove.onclick = function(){
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
</body>
3.3Node节点对象,其他5个的父对象,非特指
特点:所有dom对象都可以被认为是一个节点
方法:CRUD dom树,均是由直接父节点来操作
appendChild(e) :将元素e插入到当前节点中的末尾
removeChild(e) :删除(并返回)当前节点的指定子节点e。
replaceChild():用新节点替换一个子节点。
elt.insertBefore(newNode, childNode) :将某个节点插入到当前(父)节点内的指定节点前。即newNode添加到elt中,childNode之前。
属性:通过关系(父子关系、兄弟关系)找标签
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
parentNode:获取当前(节点)元素父节点
childNodes:获取当前(节点)元素所有下一级子节点
firstChild: 获取当前节点的第一个子节点
lastChild:获取当前节点的最后一个子节点
nextSibling:获取下一个相邻、平级的兄弟节点
previousSibling:获取上一个相邻、平级的兄弟节点
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
对于文本节点,nodeValue 属性是所包含的文本
对于属性节点,nodeValue 属性是属性值。
对于注释节点,nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素(标签)节点是不可用的。
4.HTML DOM(设置标签)
1.获取/设置标签体的值:innerHTML。
接收返回值时是获取标签体的值,
赋值时是设置标签体的值
2.value 主要用于获取/设置文本框中的内容
<body>
<div id="div1">
div
</div>
<script >
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
//alert(innerHTML); 获取值
//div标签中替换一个文本输入框
// div.innerHTML = "<input type='text'>";
//div标签中追加一个文本输入框
div.innerHTML += "<input type='text'>";
</script>
</body>
5.正则表达式
1.正则表达式:定义字符串的组成规则。
1.单个字符:[] 如: [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符: \d:单个数字字符 [0-9] \w:单个单词字符[a-zA-Z0-9_]
2.量词符号: ?:表示出现0次或1次 *:表示出现0次或多次 +:出现1次或多次 {m,n}:表示 m<= 数量 <= n
m如果缺省: {,n}:最多n次
n如果缺省:{m,} 最少m次
3.开始结束符号
^:开始
$:结束
2.正则对象:
1.两种创建方式:
1. var reg = new RegExp("正则表达式");
2**.var reg = /正则表达式/;**2.方法
test(参数):验证指定的字符串是否符合正则定义的规范,true为通过
var reg = new RegExp("^\\w{6,12}$");
//2.
var reg2= /^\w{6,12}$/;//注意:不是字符串形式,无转义字符
/* alert(reg);
alert(reg2);
*/
var username = "zhangsan";
//验证
var flag = reg.test(username);//字符串形式的多一个\,
alert(flag);
6.经典例题:城市联动框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市联动框</title>
</head>
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>河南</option>
<option>山东</option>
<option>广东</option>
</select> 城市
<select id="city">
<option>城市</option>
</select>
<script type="text/javascript">
function showCity() {
var citys = [
[],
["郑州", "商丘", "洛阳", "南阳"],
["济南", "青岛", "菏泽"],
["广州", "深圳", "东莞"]
];
var provNode = document.getElementById("province");
var index = provNode.selectedIndex;
var data = citys[index];
var cityNode = document.getElementById("city");
//删除原来的数据
var childs = cityNode.childNodes;
//注意这里不要i++;因为childs.length每次都会重新判断,会减少
for (var i = 0; i < childs.length;) {
cityNode.removeChild(childs[i]);
}
for (var i = 0; i < data.length; i++) {
var optionNode = document.createElement("option");
optionNode.innerHTML = data[i];
cityNode.appendChild(optionNode);
}
}
</script>
</body>
</html>
每日问题:
1.获取所有的节点
document.all
2.获取所有的图片节点
document.images
3.获取所有的超链接节点
document.links;
4.获取当前元素的父节点
parentNode
5.获取当前元素的下一级子元素
childNodes;
6.获取当前节点的第一个子节点
firstChild
7.获取当前节点的最后的一个子节点
lastChild
8.节点的类型属性
nodeType
9.节点的名称属性
nodeName
10.节点的值属性
nodeValue
11.通过dom对象创建一个input标签,并且类型为button,按钮内容为提交
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","提交");
12.iinsertBefore(a,b) 这段代码的意思
将a节点插入在b节点之前
13.removeChild()方法的作用
删除指定的子节点
14.根据id获取元素,返回值
document.getElementById("id"); 返回一个节点对象
15.根据名字获取元素,返回值
document.getElementsByName("name"); 返回一个节点对象数组
16.根据类名称获取元素,返回值
document.getElementsByClassName("className"); 返回一个节点对象数组
17根据标签名称获取元素,返回值
document.getElementsByTagName("tagName"); 返回一个节点对象数组