js的dom测试及实例代码

Posted 2020-11-21 难得糊涂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的dom测试及实例代码相关的知识，希望对你有一定的参考价值。

js的dom测试及实例代码

一、总结

一句话总结：

1、需要记得创建标签和创建文本节点都是document的活：document.createTextNode("Rockets的姚明");

2、appendChild就是标签都可以干的活：document.body.appendChild(hr1);

1、需要记得创建标签和创建文本节点都是document的活？

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

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

2、appendChild就是标签都可以干的活？

document.body.appendChild(hr1);//水平线节点添加到body上

二、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>

三、测试代码

  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     //1、document.getElementById(‘div1‘);
 65 
 66     //标签之间，如果有文本，就是文本节点，如果没有，就是空白节点
 67     //<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、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>