js的dom测试及实例代码
js的dom测试及实例代码⼀、总结
⼀句话总结：
> 1、需要记得创建标签和创建⽂本节点都是document的活：ateTextNode("Rockets的姚明");
> 2、appendChild就是标签都可以⼲的活：document.body.appendChild(hr1);
1、需要记得创建标签和创建⽂本节点都是document的活？
> var div1 = ateElement("div");
> var txt1 = ateTextNode("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节点
10var div1 = ateElement("div");
11var txt1 = ateTextNode("Rockets的姚明");
12//添加DOM节点
13 div1.appendChild(txt1);
14 document.body.appendChild(div1);
15
16//创建⽔平线节点
17var hr1 = ateElement("hr");
18//⽔平线节点添加到body上
19 document.body.appendChild(hr1);
20
21var marquee1 = ateElement("marquee");
22var img1 = ateElement("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">链接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>
42var ul_1_ElementById('ul_1');
43var ul_ElementById('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、ElementById('div1');
65
66//标签之间，如果有⽂本，就是⽂本节点，如果没有，就是空⽩节点
67//<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、3是⼉⼦，2是孙⼦
68
69
70// var ElementById('div1');
71//console.log(div1);
72// console.deValue);
73
74
75//var innerHTML=div1.innerHTML;
76var body_ElementsByTagName('body');
77var body1=body_1[0];
78//veChild(Node);
79// console.log(div1);
80//console.log(innerHTML);
81//console.log(body_1);
82
83function testGetAttribute(){
84var a_ElementById('a_1');
85var a_1_href=Attribute('href');
86 console.log(a_1_href);
87 console.log(a_deValue +' :a_deValue');
88 a_1.setAttribute('a_id','7865');
89 }
90
91function getAElements(){
92var ElementsByName('tag_name');
93 console.log(aa.length);
94 console.log(aa);
95 }
96
97
98//1.现在的⽬标，给div增加⼀个h3，h3⾥⾯的⽂本内容是‘还我命来’，h3还有⼀个属性是‘huai_ren’，值是‘fry’ 99function add_h3() {
100var ElementById('div1');
101var h3_ateElement("h3");
102var ateTextNode('还我命来');
103 h3_1.append(str1);
marquee marquee104 h3_1.setAttribute('huai_ren','fry');
105 div1.append(h3_1);
106 }
107
108function add_marquee() {
109// var ElementById('marquee_test');
110var ElementById('body');
111var marquee_ateElement("marquee");
112var img_ateElement("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标签
120function remove_child_test() {
121var ElementById('body');
122var ul_ElementById('ul_1');
123 veChild(ul_1);
124 }
125
126//⽬标：获取 id为marquee_test标签的⽗节点
127function test_parentNode(){
128var marquee_ElementById('marquee_test');
129 console.log(marquee_test.parentNode);
130 }
131
132//⽬标：获取 id为marquee_test标签的上⼀个兄弟和下⼀个兄弟
133function test_sibling (){
134var marquee_ElementById('marquee_test');
135 console.log(Sibling);
136 }
137
138</script>
139</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论