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>
原文地址：https://www.cnblogs.com/shihaiying/p/11780255.html
时间： 2024-10-29 19:10:34