JavaScriptDOM
JavaScriptDOM
DOM:Document Object Model(文本对象模型)
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。——D:文档-html文档或xml文档
——O:对象-document对象的属性和方法
——M:模型
——DOM是针对xml(html)的基于树的api
——DOM树：节点(node)的层次
——DOM把一个文档表示为一棵家谱树（父、子、兄弟）
——DOM定义了Node的接口以及许多种节点类型来标识xml节点的多个方面。
1.节点及其类型：
1）元素节点
2）属性节点：元素的属性，可以直接通过属性的方式来操作。
3）文本节点：是元素节点的子节点，其内容为文本。
第一个helloworld文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1.当整个HTML文档完全加载成功后触发window.onload事件。
//事件触发时，执行后面function里面的函数体
window.onload = function () {
//2.获取所有的button节点，并取得第一个元素
var click = document.getElementsByTagName("button")[0];
//3.为button的onclick事件赋值：当点击button时，执行函数体。
click.onclick = function () {
//4.弹出警告框helloworld
alert("helloworld");
}
}
</script>
</head>
<body>
<button>Click</button>
</body>
</html>
2.JS代码写在哪里
（1）
<!--HTML代码和js代码耦合在一起-->
<button onclick="alert('helloworld');">Click</button>
（2）
<body>
<button>Click</button>
</body>
</html>
<!--
在整个HTML文档被加载后，获取其中的节点，
把script节点放在html文档的最后
但不符合些JS代码的习惯
-->
<script type="text/javascript">
//1.获取button
var btns = document.getElementsByTagName("button");
alert(btms.length);
//2.为button添加onclick事件
btns[0].onclick = function () {
alert("helloworld");
}
</script>
（3）标准
<script type="text/javascript">
//window.onload事件在整个html文档被完全加载后出发执行。
//所以在其中可以获取到html文档的任何元素
window.onload = function () {
}
</script>
</head>
<body>
<button>Click</button>
</body>
3.如何获取元素节点：
1）document.getElementById:根据id属性获取对应的单个节点
2）document.getElementsByTagName:根据标签名获取指定的节点名
3）document.getElementsByName:根据节点的name属性获取符合条件的节点数组
4.获取属性节点：
1）可以直接通过cityNode.id这样的方式获取和设置属性节点的值
2）通过元素节点的getAttributeNode方法来获取属性节点，然后再通过nodeValue来读写
<script type="text/javascript">
//window.onload事件在整个html文档被完全加载后出发执行。
//所以在其中可以获取到html文档的任何元素
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>
5.获取元素节点的子节点
1）childNodes属性获取全部的子节点
2）firstChild属性获取第一个子节点
3）lastChild属性获取最后一个子节点
6.获取文本节点：
1）步骤：元素节点-->获取元素节点的子节点
2）若元素节点只有文本节点一个子节点
例如：
<li id="bj" name="BeiJing"> 北京</li>
可以先获取到指定的元素节点eleNode，
然后利用eleNode.firstChild.nodeValue的方法来读写其文本节点的值
window.onload = function () {
//文本节点一定是元素节点的子节点
//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2.通过firstChild定义到文本节点
var bjTextNode = bjNode.firstChild;
//3.通过操作文本节点的nodeValue属性来读写文本节点的值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "尚硅谷";
}
window.onload = function () {
var cityLi = document.getElementsByTagName("li");
for (var i =0;i<cityLi.length;i++){
cityLi[i].onclick = function () {
alert(i);//8
}
}
}
7..节点的属性：
1）nodeName：代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName
2）nodeType：返回一个整数，这个数值代表着给定节点的类型，只读属性。
3）nodeValue：返回给定节点的当前值(字符串)，可读写的属性
<1>元素节点:返回值为null
<2>属性节点：返回值是这个属性的值
<3>文本节点：返回值是这个文本节点的内容
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);//属性节点的节点名：属性名name
alert(nameAttr.nodeValue);//属性节点的nodeValue属性值：属性值
//3.文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本节点：3
alert(textNode.nodeName);//文本节点的节点名#text
alert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值
}
nodeType、nodeName是只读的
而nodeValue是可以被改变的
以上三个属性，只有在文本节点中使用nodeValue读写文本值时使用最多。
实验一：提示框为文本节点内容
<script type="text/javascript">
window.onload = function () {
var cityLi = document.getElementsByTagName("li");
for (var i =0;i<cityLi.length;i++){
cityLi[i].onclick = function () {
alert(this.firstChild.nodeValue);
}
}
}
</script>
实验二：li节点的文本值没有^^开头，加上，有，则去除。
<script type="text/javascript">
window.onload = function () {
var reg = /^\^{2}/g;
var cityLi = document.getElementsByTagName("li");
for (var i =0;i<cityLi.length;i++){
cityLi[i].onclick = function () {
var val = this.firstChild.nodeValue;
if (reg.test(val)) {
val = val.replace(reg,"");
}else {
val = "^^"+val;
}
this.firstChild.nodeValue = val;
}
}
}
</script>
8.创建一个元素节点：
1）createElement():按照给定的标签名创建一个新的元素节点。方法只有一个参数：被创建的方法的返回值，是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的nodeType属性值等于1.
新元素节点不会自动添加到文档里，他只是一个存在于javascript上下文的对象。
9.创建一个文本节点：
1）createTextNode():创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向
