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>
