JavaScript的学习----3.操作DOM对象

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()"> &nbsp;
 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>