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>