DOM模型
DOM:文档对象模型（Document Object Model）
通过DOM可以动态的改变文档内容
动态改变文档内容的原理：
解析文档（如HTML）并生成DOM树
通过DOM标准接口+编程语言改变文档内容
DOM树的生成：
DOM树种的节点类型和节点关系：
DOM的操作：
一查看节点【访问指定节点的方法：
1.getElementById
例: var d=document.getElementById('d');
d.innerText='23333';
<div id="d"></div>
效果：div中添加了内容'23333',如图：
2.getElementsByName
例：var abc=document.getElementsByName('abc');
<a href="1-核心DOM.html" name="abc">2333</a>
abc[0].innerText='66666';
效果：a标签内的内容'2333'变成'66666'3.getElementsByTagName
例：var span=document.getElementsByTagName('span')
span[0].innerText='55555';
<span></span>
效果：span标签内添加了内容'55555',如图：
4.getElementsByClassName
例：var c=document.getElementsByClassName('c');
//通过for循环找到所有的class名字为c的标签
for(var i=0;i< c.length;i++){ c[i].innerText='88888';
<p class="c">7777777</p> <p class="c">7777777</p>
效果：找到所有的class名字为c的标签，标签的内容全部变为'88888'】
二 创建和增加节点【创建和增加节点的方法：
1.createElment()：创建节点
例： //创建一个节点(括号内为节点的标签名字),只是创建，并未添加内容和属性
vara=document.createElement('a');
a.href='https://www.baidu.com/?tn=57095150_2_oem_dg'; a.innerText='click'; //添加元素 d.appendChild(a);
效果相当于<a href="https://www.baidu.com/?tn=57095150_2_oem_dg">click</a>
2.appendChild():末尾追加方式插入节点
3.insertBefore():在指定节点前插入新节点
例：varp=document.createElement('p');
p.innerText='23333'; d.appendChild(p); //参数1：要添加的元素 ， 参数2：指定节点 d.insertBefore(p,a);
效果：新的标签p添加在a标签之前
4.cloneNode():克隆节点
例：
var spanclone=span.cloneNode(true);//true:克隆里面的内容
false或是不加：只克隆标签，无内容 s.appendChild(spanclone);
<span id="s">你一定要是个孩子</span>
效果：克隆一个span】
三删除和替换节点
查看节点
完整的节点层次的HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload= function () { //通过id找到所在的td var t1=document.getElementById('t1'); //获取td的父节点元素tr var tr=t1.parentNode; tr.style.backgroundColor='blue'; //获取所得父节点tr的第一个子元素节点 var t2=tr.firstElementChild; t2.innerText='111'; //获取所得父节点tr的最后一个子元素节点 var t3=tr.lastElementChild; t3.innerText='333'; //获取所的节点tr的第二个子元素节点，通过第三个子元素找前一个节点找到第二个子元素节点 var t4=t3.previousElementSibling; t4.innerText='222'; //获取所的节点tr的第二个子元素节点，通过第一个子元素找后一个节点找到第二个子元素节点 var t4=t2.nextElementSibling; t4.innerText='2222'; } </script> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td id="t1">1</td> <td>2</td> <td>3</td> </tr> </table> </body> </html>
完整的查看节点的html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> /*文档就绪函数*/ window.onload=function(){ var d=document.getElementById('d'); /*添加文本信息*/ // d.innerHTML='23333'; //可以添加标签，文本信息 d.innerText='23333'; //只能添加文本信息 var abc=document.getElementsByName('abc'); /!*通过下标得到对应元素*!/ abc[0].innerText='66666';//getElementsByName中的Elements表明元素不只有一个，
所以通过下标[0]找到第一个元素
/!*通过标签名字得到对应元素*!/
var span=document.getElementsByTagName('span')
span[0].innerText='55555';
/!*通过class得到对应元素*!/
var c=document.getElementsByClassName('c');
for(var i=0;i< c.length;i++){
c[i].innerText='88888';
}
}
</script>
</head>
<body>
<div id="d"></div>
<a href="1-核心DOM.html" name="abc">2333</a>
<span></span>
<p class="c">7777777</p>
<p class="c">7777777</p>
</body>
</html>
效果如图：
创建和增加节点的完整HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var d=document.getElementById('d'); //创建一个节点(括号内为节点的标签名字),只是创建，并未添加内容和属性 var a=document.createElement('a'); a.href='https://www.baidu.com/?tn=57095150_2_oem_dg'; a.innerText='click'; //添加元素 d.appendChild(a); //在指定节点前插入新节点 var p=document.createElement('p'); p.innerText='23333'; d.appendChild(p); //参数1：要添加的元素 ， 参数2：指定节点 d.insertBefore(p,a); //获取目标元素 var span=document.getElementById('s'); //克隆新元素 var spanclone=span.cloneNode(true);//true:克隆里面的内容 false或是不加：只克隆标签，无内容 s.appendChild(spanclone); } </script> </head> <body> <div id="d"></div> <span id="s">你一定要是个孩子</span> </body> </html>
效果如图：
修改节点的完整HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> /*文档就绪函数，文档加载完后才出现效果*/ window.onload=function(){ //通过id找到对应元素 var d=document.getElementById('d'); //修改颜色（两种方式） d.style.color='red'; d.style.cssText='color：yellow'; //字体加粗 +=增加新的样式，即样式是增加的 ，如果是=的话，只是显示最后的style样式，覆盖以前的所有样式 d.style.cssText+='font-weight:bold'; //字体大小 d.style.cssText+='font-size:large'; //添加类名 d.className='a';//添加class='a' d.className+='a';//class变成'aa'
} </script> </head> <body> <div id="d"> 空白格 </div> </body> </html>