DOM即就是：Document Object Model（文档对象模型）：
DOM包括：HtmlDom , CssDom;
那么JavaScript如何获得网页元素并进行操作呢？？？ 通过节点。
1.getElement系列访问指定节点：
getElementById（）
getElementsByName（）
getElementsByTagName（）
2.节点的属性：
parentNode：返回节点的父节点
childNodes:返回子节点集合
firstChild:返回节点的第一个子节点
lastChild:返回节点的最后一个结点
nextSibling:下一个节点
previousSibling:上一个节点
3.element的属性：
firstElementChild：返回节点的第一个子节点
lastElementChild：返回节点的最后一个结点
nextElementChild：下一个结点
previousElementSibling：上一个节点
4.节点信息：
nodeName:节点名称
nodeValue:节点值
nodeType:节点类型
元素element （NodeType值）1
属性attr 2
文本text 3
注释comments 8
文档document 9
一些代码实例：
1.节点的访问测试：
lastchild:会返回一个[Object Text]类型
lastElementChild:会返回一个[Object HTMLElement]
[Object Text]:文本对象，无法直接写入网页，会出现一个未定义；
[Object HTMLElement]:网页元素对象，调用innerHTML可以直接写入网页；
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 </head> 6 <!-- 7 document.write :只能写入Html元素 8 [Object Text] :文本对象，无法直接写入网页，会出现一个 未定义 9 [Object HTMLElement]:网页元素对象，调用innerHTML可以直接写入网页（Html的形式） 10 11 lastchild:会返回一个[Object Text]类型 12 13 --> 14 15 <body> 16 <section id="id1"> 17 18 <ul> 19 <li><a href="">1</a></li> 20 <li><a href="">2</a></li> 21 <li><a href="">3</a></li> 22 <li><a href="">4</a></li> 23 <li><a href="">5</a></li> 24 <li><a href="">6</a></li> 25 </ul> 26 27 </section> 28 29 <script> 30 31 var a=document.getElementById("id1").lastElementChild.lastChild.parentElement; 32 console.log(a); 33 document.writeln(a.innerHTML); 34 document.writeln(a); 35 </script> 36 37 </body> 38 </html>
2.获得和修改节点 的属性：
eg：修改a标签的src属性；
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 6 7 </head> 8 <body> 9 10 <a href="#" id="a" style="">啦啦啦啦</a> 11 12 <script> 13 14 var a=document.getElementById("a").getAttribute("href"); 15 document.getElementById("a").setAttribute("href","https://www.baidu.com"); 16 a=document.getElementById("a").getAttribute("href"); 17 console.log(a); 18 document.getElementById("a").setAttribute("style","border: 2px solid red"); 19 </script> 20 21 </body> 22 </html>
3.创建和插入节点的测试：
//A.appendChild(B) 在a的后面追加b
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 </head> 6 <body> 7 8 <p id="pp">请选择你喜欢的书籍： 剑指Offer<input type="radio" name="book" onclick="book()"> 9 JVM<input type="radio" name="book" onclick="book()"> 10 11 </p> 12 13 <div></div> 14 15 <script> 16 // document.getElementById("1"); 17 //获得的都是[Object htmlelement] 18 19 function book() { 20 var a=document.getElementsByName("book"); 21 //console.log(a); //a是一个数组，a[0]--JVM a[1]--剑指offer 22 23 var b=document.getElementsByTagName("div")[0]; 24 //[0]--div标签里面的内容 25 26 var img=document.createElement("img"); 27 //创建的元素对象 28 29 if(a[0].checked){ 30 img.setAttribute("src","images/1.png"); 31 img.setAttribute("alt","JVM"); 32 //A.appendChild(B) 在a的后面添加b 33 b.appendChild(img); 34 //添加指定的元素 35 } 36 if(a[1].checked){ 37 img.setAttribute("src","images/2.png"); 38 img.setAttribute("alt","剑指Offer"); 39 b.appendChild(img); 40 } 41 } 42 43 44 45 </script> 46 47 48 49 </body> 50 </html>
4.对选中元素进行修改和删除：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 </head> 6 <body> 7 8 <p> 9 <img src="images/1.png" alt="Jvm" id="p1"> 10 <input type="button" value="删除我" onclick="del()"> 11 </p> 12 13 <p> 14 <img src="images/2.png" alt="剑指Offer" id="p2"> 15 <input type="button" value="替换我" onclick="rep()"> 16 </p> 17 18 19 <script> 20 21 function del() { 22 23 var par=document.getElementById("p1").parentElement; 24 //removeChild(子节点) 25 par.removeChild(par.firstChild); 26 console.log(par.firstChild); 27 } 28 29 function rep() { 30 var old=document.getElementById("p2"); 31 //修改路径直接替换 32 //old.setAttribute("src","images/1.png"); 33 34 var newp=document.createElement("img"); 35 newp.setAttribute("src","images/1.png"); 36 old.parentNode.replaceChild(newp,old); 37 } 38 </script> 39 40 </body> 41 </html>