1.什么是JavaScript DOM
通过JavaScript，您可以重构整个HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的。
DOM 可被JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。也就是说DOM可以帮助JavaScript更好的和页面进行交互。
DOM:Document Object Model(文本对象模型)
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型 DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释结点 等等
2.在HTML文档的什么位置编写 JS 代码
0). 直接在 html 页面中书写代码.
<button id="button" onclick="alert('hello world');">Click Me!</button>
缺点:
①. js 和 html 强耦合, 不利用代码的维护
②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦
1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
获取不到指定的节点:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
var cityNode = document.getElementById("city");
//打印结果为 null.
alert(cityNode);
</script>
</head>
<body>
2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯
3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
var cityNode = document.getElementById("city");
alert(cityNode);
};
</script>
</head>
<body>3.获取元素节点
1). **document.getElementById: 根据 id 属性获取对应的单个节点
2). **document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3). document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
//获取指定的元素节点.
window.onload = function(){
//1. 获取 id 为 bj 的那个节点.
//在编写 HTML 文档时, 需确保 id 属性值是唯一的.
//该方法为 document 对象的方法
var bjNode = document.getElementById("bj");
alert(bjNode);
//2. 获取所有的 li 节点.
//使用标签名获取指定节点的集合.
//该方法为 Node 接口的方法, 即任何一个节点都有这个方法.
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);
//若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()
//方法对于 IE 无效. 所以使用该方法时需谨慎.
var bjNode2 = document.getElementsByName("BeiJing");
alert(bjNode2.length);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html> 4.读写属性节点
先获取元素节点，通过调用元素节点的value变量去读写元素节点的属性
通常情况下，不会同过获取属性节点的方式去读写属性节点的值，而是用元素节点.属性名的方式去调用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
//读写属性节点: 通过元素节点 . 的方式来获取属性值和设置属性值.
window.onload = function(){
//属性节点即为某一指定的元素节点的属性.
//1. 先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2. 再读取指定属性的值
alert(nameNode.value);
//3. 设置指定的属性的值.
nameNode.value = "尚硅谷";
//var nameAttr = nameNode.getAttributeNode("value");
//alert(nameAttr);
//alert("--" + nameAttr.nodeValue);
//nameAttr.nodeValue = "atguigu";
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
name: <input type="text" name="username"
id="name" value="atguigu"/>
</body>
</html> 5.获取一个节点的子节点
先获取父节点，通过childNodes方法或者父节点.getElementsByTagName("");获取子节点，也可以通过父节点.firstChild和lastChild方法获取其第一个与最后一个子节点
1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
//获取元素节点的子节点
window.onload = function(){
//1. 获取 #city 节点的所有子节点.
var cityNode = document.getElementById("city");
//2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
//但该方法不实用.
alert(cityNode.childNodes.length);
//3. 获取 #city 节点的所有 li 子节点.
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4. 获取指定节点的第一个子节点和最后一个子节点.
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
name: <input type="text" name="username"
id="name" value="atguigu"/>
</body>
</html> 6.读写文本节点
1). 步骤: 元素节点 --> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
//获取文本节点
window.onload = function(){
//文本节点一定是元素节点的子节点.
//1. 获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2. 通过 firstChild 定义为到文本节点
var bjTextNode = bjNode.firstChild;
//3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值.
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "尚硅谷";
//alert(bjTextNode);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
name: <input type="text" name="username"
id="name" value="atguigu"/>
</body>
</html> ————————————————————————————————————————————————————————
两个练习，html内容与上述一样，直接将js代码块拿过来。
<script type="text/javascript">
window.onload = function(){
//点击每个 li 节点, 都弹出其文本值.
//1. 获取所有的 li 节点
var liNodes = document.getElementsByTagName("li");
//2. 实用 for 循环进行遍历. 得到每一个 li 节点
for(var i = 0; i < liNodes.length; i++){
//3 为每一个 li 节点添加 onclick 响应函数.
liNodes[i].onclick = function(){
//4. 在响应函数中获取当前节点的文本节点的文本值
var TextNode = this.firstChild;
//5. alert 打印.
//this 为正在响应事件的那个节点.
alert(TextNode.nodeValue);
//此时 i 已经是 8 了, 而 liNodes[8] 不指向任何节点.所以不能使用alert(liNodes[i].firstChild.nodeValue);
//alert(i);
}
}
}
</script><script type="text/javascript">
window.onload = function(){
//点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上
//有, 则去除
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
var val = this.firstChild.nodeValue;
var reg = /^\^{3}/g;
if(reg.test(val)){
val = val.replace(reg, "");
}else{
val = "^^^" + val;
}
this.firstChild.nodeValue = val;
}
}
/*
//1. 使用正则表达式判断是否已 ^^ 开始
//2. 调用字符串的 replace(reg, str) 方法除去指定的字符串.
var str = "^^abc";
var reg = /^\^{2}/g;
alert(reg.test(str)); //true
str = str.replace(reg, "");
alert(str);
var str2 = "abc";
alert(reg.test(str2)); //false
*/
}
</script>7.节点的属性
节点有nodeType、nodeName、nodeValue三个属性
1). nodeName: 代表当前节点的名字. 只读属性.
**如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
**3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点, 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容
<script type="text/javascript">
//关于节点的属性: nodeType, nodeName, nodeValue
//在文档中, 任何一个节点都有这 3 个属性
//而 id, name, value 是具体节点的属性.
window.onload = function(){
//1. 元素节点的这 3 个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType); //元素节点: 1
alert(bjNode.nodeName); //节点名: li
alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null
//2. 属性节点
var nameAttr = document.getElementById("name")
.getAttributeNode("name");
alert(nameAttr.nodeType); //属性节点: 2
alert(nameAttr.nodeName); //属性节点的节点名: 属性名
alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值
//3. 文本节点:
var textNode = bjNode.firstChild;
alert(textNode.nodeType); //文本节点: 0
alert(textNode.nodeName); //节点名: #text
alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.
//nodeType、nodeName 是只读的.
//而 nodeValue 是可以被改变的。
//以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.
}
</script>
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
