js的dom測試及實例代碼

時間 2019-11-05

標籤 dom 測試實例代碼欄目 JavaScript 简体版

原文原文鏈接

js的dom測試及實例代碼

1、總結

一句話總結：

一、須要記得建立標籤和建立文本節點都是document的活：document.createTextNode("Rockets的姚明");

二、appendChild就是標籤均可以乾的活：document.body.appendChild(hr1);

一、須要記得建立標籤和建立文本節點都是document的活？

var div1 = document.createElement("div");

var txt1 = document.createTextNode("Rockets的姚明");

二、appendChild就是標籤均可以乾的活？

document.body.appendChild(hr1);//水平線節點添加到body上

2、dom實例代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>核心DOM操做</title>
 6 </head>
 7 <body>
 8 <script>
 9 //建立DOM節點
10 var div1 = document.createElement("div");
11 var txt1 = document.createTextNode("Rockets的姚明");
12 //添加DOM節點
13 div1.appendChild(txt1);
14 document.body.appendChild(div1);
15 
16 //建立水平線節點
17 var hr1 = document.createElement("hr");
18 //水平線節點添加到body上
19 document.body.appendChild(hr1);
20 
21 var marquee1 = document.createElement("marquee");
22 var img1 = document.createElement("img");
23 //設置節點屬性
24 img1.setAttribute('src','ym.jpg');
25 img1.setAttribute('width','200px');
26 img1.setAttribute('height','200px');
27 //圖片節點添加到marquee節點上
28 marquee1.appendChild(img1);
29 document.body.appendChild(marquee1);
30 </script>    
31 </body>
32 </html>

3、測試代碼

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6 </head>
  7 <body id="body">
  8     <div id="div1">
  9         321321
 10     </div>
 11     <button onclick="add_h3()">add_h3</button>
 12     <hr>
 13     <a id="a_1" name='tag_name' href="www.baidu.com">連接1</a>
 14     <a name='tag_name' href="">連接2</a>
 15     <a name='tag_name' href="">連接3</a>
 16     <a name='tag_name' href="">連接4</a>
 17     <!--<button onclick="getAElements()">點我</button>-->
 18     <button onclick="testGetAttribute()">點我</button>
 19     <hr>
 20 
 21     <ul id="ul_1">1
 22         <li>javascript</li>3
 23         <li>jquery</li>5
 24         <li>html</li>7
 25     </ul>
 26     <button onclick="remove_child_test()">我就是看你不爽，我就要刪了你</button>
 27     <hr>
 28     <button onclick="test_parentNode()">獲取body</button>
 29     111
 30     <div id="marquee_test">
 31 
 32     </div>
 33     332
 34     <button onclick="test_sibling()">測試上下兄弟</button>
 35     <button onclick="add_marquee()">添加跑馬燈標籤</button>
 36     <!--<marquee>-->
 37         <!--<img src="./ym.jpg">-->
 38     <!--</marquee>-->
 39     <hr>
 40 
 41     <script>
 42         var ul_1_aa=document.getElementById('ul_1');
 43         var ul_1=document.getElementById('ul_1').childNodes;
 44         console.log(ul_1.length);
 45         // console.log(ul_1[0]);
 46         // console.log(ul_1_aa.firstChild);
 47 
 48         console.log(ul_1[6]);
 49         console.log(ul_1_aa.lastChild);
 50         // console.log(ul_1[1]);
 51         // console.log(ul_1[2]);
 52         // console.log(ul_1[3]);
 53         // console.log(ul_1[4]);
 54         // console.log(ul_1[5]);
 55         // console.log(ul_1[6]);
 56         // console.log(ul_1[0].nodeType);
 57     </script>
 58 <ul>1<li>2</li>3</ul>
 59 </body>
 60 <script>
 61     //你知道dom操做是用js操做dom樹的原理，而且知道幾個核心函數，要用的時候不熟悉的函數直接去查文檔
 62     //查文檔的話能夠直接百度 ‘dom 操做’或‘dom 操做教程’ 關鍵詞
 63     /*經常使用函數*/
 64     //一、document.getElementById('div1');
 65 
 66     //標籤之間，若是有文本，就是文本節點，若是沒有，就是空白節點
 67     //<ul>1<li>2</li>3</ul> 1,2,3的位置都是這樣，一、3是兒子，2是孫子
 68 
 69 
 70     // var div1=document.getElementById('div1');
 71     //console.log(div1);
 72     // console.log(div1.nodeValue);
 73 
 74 
 75     //var innerHTML=div1.innerHTML;
 76     var body_1=document.getElementsByTagName('body');
 77     var body1=body_1[0];
 78     //div1.removeChild(Node);
 79     // console.log(div1);
 80     //console.log(innerHTML);
 81     //console.log(body_1);
 82 
 83     function testGetAttribute(){
 84         var a_1=document.getElementById('a_1');
 85         var a_1_href=a_1.getAttribute('href');
 86         console.log(a_1_href);
 87         console.log(a_1_href.nodeValue +'   :a_1_href.nodeValue');
 88         a_1.setAttribute('a_id','7865');
 89     }
 90 
 91     function getAElements(){
 92         var aa=document.getElementsByName('tag_name');
 93         console.log(aa.length);
 94         console.log(aa);
 95     }
 96 
 97 
 98     //1.如今的目標，給div增長一個h3，h3裏面的文本內容是‘還我命來’，h3還有一個屬性是‘huai_ren’，值是‘fry’
 99     function add_h3() {
100         var div1=document.getElementById('div1');
101         var h3_1=document.createElement("h3");
102         var str1=document.createTextNode('還我命來');
103         h3_1.append(str1);
104         h3_1.setAttribute('huai_ren','fry');
105         div1.append(h3_1);
106     }
107 
108     function add_marquee() {
109         // var div1=document.getElementById('marquee_test');
110         var body1=document.getElementById('body');
111         var marquee_1=document.createElement("marquee");
112         var img_1=document.createElement("img");
113         img_1.setAttribute('src','./ym.jpg');
114         marquee_1.append(img_1);
115         // div1.append(marquee_1);
116         body1.append(marquee_1);
117     }
118 
119     //目標：咱們想在body裏面刪了ul標籤
120     function remove_child_test() {
121         var body1=document.getElementById('body');
122         var ul_1=document.getElementById('ul_1');
123         body1.removeChild(ul_1);
124     }
125 
126     //目標：獲取 id爲marquee_test標籤的父節點
127     function test_parentNode(){
128         var marquee_test=document.getElementById('marquee_test');
129         console.log(marquee_test.parentNode);
130     }
131 
132     //目標：獲取 id爲marquee_test標籤 的  上一個兄弟和下一個兄弟
133     function test_sibling (){
134         var marquee_test=document.getElementById('marquee_test');
135         console.log(marquee_test.nextSibling);
136     }
137 
138 </script>
139 </html>