这两天重新认真学下DOM对象元素节点查询
写下随笔总结一下，应该没有多少要说的，该说的应该全在代码的注释里面
本人学习看的视频资料：https://www.bilibili.com/video/BV1YW411T7GX?p=91
个人觉得该视频是一个讲的很细，听起来算是易懂的视频，吃了第一遍瞎找视频的亏
第一遍学JS学的不知道怎么说，原理很多都有印象，但是不会用，原理虽有印象但很多不懂或没涉及
第二遍是看上面那个视频学的，只想说，超哥牛逼，讲的挺好，主要是白嫖真香
虽然只是视频说是简单入门，但不少人说这已经算是从入门到精通的级别
废话不多说，直接上源码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM对象初步介绍</title> 6 7 </head> 8 <body> 9 <p id="pId">我是id为pID的p标签</p> 10 <button id="btn1">按钮</button> 11 <script> 12 /* 13 DOM：全称Document Object Model文档对象类型，JS中通过DOM来对HTML文档进行操作 14 文档：文档表示的就是整个HTML网页文档 15 对象：对象表示网页中的每一个部分转化为一个对象 16 模型：使用模型来表示对象之间的关系，这样方便获取对象 17 */ 18 19 /* 20 节点Node，是构成网页最基本的组成部分，网页中的每一个部分都可称为一个节点 21 如：html标签、属性、文本、注释、整个文档都是一个节点，虽然都是节点，但是实际上他们的具体类型是不同的 22 比如：标签被称为元素节点、属性被称为属性节点、文本被称为文本节点、文档被称为文档节点 23 节点的类型不同，属性和方法也不尽相同 24 */ 25 26 var pId = document.getElementById("pId"); // 获取p对象 27 pId.innerHTML = "我是被修改后的p标签"; // 修改p标签的文本 28 29 /* 30 事件，就是用户和浏览器之间的交互行为，如点击鼠标，移动鼠标，关闭窗口等 31 可以为事件对应属性设置一些JS代码，当事件被触发时，相关代码将会执行 32 如：可以为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，其对应函数将被调用 33 像这种单击事件绑定的函数，我们称之为单击响应函数 34 */ 35 var btn1 = document.getElementById("btn1"); 36 btn1.onclick = function(){ 37 alert("你点到我了~"); 38 } 39 40 /* 41 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行 42 如果将script标签写到页面的上边（即页面在html内的body里面，script在html的head里面） 43 在执行script标签里面的代码时，此时页面还没加载完毕，页面没有加载DOM对象，会导致无法获取html对象 44 解决办法： 45 1、将JS代码编写到页面下部，为了可以在页面加载完毕后再执行js代码，上面的写法用的就是这种方法 46 这种方法追求性能，当事件发生时再加载，事件不发生就不加载，减少运行时间 47 2、onload时间会在整个页面加载完成后才触发，为window绑定一个onload对象 48 该事件对应的响应函数会在页面加载完成之后执行，这样可以确保代码执行时多有DOM对象加载完毕 49 追求代码维护，易管理，实现方法如下： 50 window.onload = function(){ 51 var pId = document.getElementById("pId"); 52 pId.innerHTML = "我是被修改后的p标签"; 53 var btn1 = document.getElementById("btn1"); 54 btn1.onclick = function(){ 55 alert("你点到我了~"); 56 } 57 } 58 删去body标签里面的script标签包括标签所有内容 59 再在head标签里新建一个script标签，再将上面代码（50 ~ 57）复制到script标签里面即可 60 */ 61 </script> 62 </body> 63 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM对象查询</title> 6 </head> 7 <body> 8 <button id="btn01">按钮01</button> 9 <button id="btn02">按钮02</button> 10 <button id="btn03">按钮03</button> 11 <p id="pId1">北京</p> 12 <p id="pId2">上海</p> 13 <p id="pId3">广州</p> 14 <p id="pId4">成都</p> 15 <p id="pId5">重庆</p> 16 <ul> 17 <li name="weather" class="wt">北京：snow</li> 18 <li name="weather" class="wt">上海：sun</li> 19 <li name="weather" class="wt">广州：rain</li> 20 <li name="weather" class="wt">成都：clowd</li> 21 <li name="weather" class="wt">重庆：mist</li> 22 </ul> 23 <script> 24 /* 25 获取元素节点，通过document对象调用 26 getElementById()：通过id属性获取一个元素节点对象 27 getElementsByTagName()：通过标签名获取一组元素节点对象 28 getElementsByName()：通过name属性获取一组元素节点对象 29 */ 30 31 // getElementById() 32 var btn01 = document.getElementById("btn01"); // 查找id为btn01的节点 33 btn01.onclick = function(){ // 为按钮设置单击事件的响应函数 34 var beiJing = document.getElementById("pId1"); // 查找id为pId的节点 35 alert(beiJing.innerHTML); // innerHTML，通过这个属性可以获取元素内部的html代码 36 }; 37 38 // getElementsByTagName() 39 var btn02 = document.getElementById("btn02"); 40 btn02.onclick = function(){ 41 // 查找所有p节点，getElementsByTagName()可以根据标签名获取一组元素节点对象 42 // 使用这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中，就算只找到一个元素节点也会返回数组 43 var pList = document.getElementsByTagName("p"); 44 console.log(pList); // HTMLCollection(5) [p#pId1, p#pId2, p#pId3, p#pId4, p#pId5, 45 // pId1: p#pId1, pId2: p#pId2, pId3: p#pId3, pId4: p#pId4, pId5: p#pId5] 46 console.log(pList.length); // 5 47 for(var i = 0; i < pList.length; i++){ 48 // alert(pList[i]); // 返回[object HTMLParagraphElement] 49 alert(pList[i].innerHTML); // 依次弹出弹窗：北京、上海、广州、成都、重庆 50 }; 51 }; 52 53 // getElementsByName() 54 var btn03 = document.getElementById("btn03"); 55 btn03.onclick = function(){ 56 // 查询所有name = weather的所有节点，返回一个类数组对象 57 // innerHTML用于获取元素内部的HTML代码，但是要注意的是，对于自结束标签，这个属性没有意义 58 // 如果需要直接使用元素节点的属性：直接使用元素.属性名，如：元素.id、元素.name、元素.value 59 // 注意：class属性不能采用这种方式，若想读取class属性时需要使用元素.className 60 var nameOfWeatherList = document.getElementsByName("weather"); 61 console.log(nameOfWeatherList); // NodeList(5) [li, li, li, li, li] 62 console.log(nameOfWeatherList[0].innerHTML); // 北京：snow 63 for(var i = 0; i < nameOfWeatherList.length; i++){ 64 alert(nameOfWeatherList[i].innerHTML); 65 } 66 alert(nameOfWeatherList[0].className); // wt 67 } 68 </script> 69 </body> 70 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM对象元素节点查询2</title> 6 <style type="text/css"> 7 #country{ 8 background-color: aquamarine; 9 } 10 #city{ 11 background-color: slateblue; 12 } 13 #language{ 14 background-color: darksalmon; 15 } 16 </style> 17 </head> 18 <body> 19 <table id="tableId" border="1"> 20 <tr id="country"> 21 <td>China</td> 22 <td>America</td> 23 <td>Russia</td> 24 <td>Japan</td> 25 <td>India</td> 26 </tr> 27 <tr id="city"> 28 <td>Beijing</td> 29 <td>new York</td> 30 <td>Moscow</td> 31 <td>Tokyo</td> 32 <td>New Delhi</td> 33 </tr> 34 <tr id="language"> 35 <td>Chinese</td> 36 <td>English</td> 37 <td>Russian</td> 38 <td>Japanese</td> 39 <td>English</td> 40 </tr> 41 </table> 42 <button id="btn01">按钮01</button> 43 <button id="btn02">按钮02</button> 44 <button id="btn03">按钮03</button> 45 <script> 46 // 通过具体的元素节点调用 47 // getElementTagName() 方法，返回当前节点的指定标签名后代节点 48 var btn01 = document.getElementById("btn01"); 49 btn01.onclick = function(){ 50 var country = document.getElementById("country"); // 获取id为country的节点 51 var countryList = country.getElementsByTagName("td"); //返回country节点下标签名为td的所有后代节点的类数组对象 52 console.log(countryList); // HTMLCollection(5) [td, td, td, td, td] 53 console.log(countryList.length); // 5 54 for(var i = 0; i < countryList.length; i++){ 55 alert(countryList[i].innerHTML); 56 } // 遍历countryList类数组中的所有元素，即遍历country节点下标签名为td的所有后代节点的文本内容 57 }; 58 59 // childNodes 属性，表示当前节点的所有子节点 60 var btn02 = document.getElementById("btn02"); 61 btn02.onclick = function(){ 62 var language = document.getElementById("language"); 63 var languageChildNodes = language.childNodes; 64 console.log(languageChildNodes); // NodeList(11) [text, td, text, td, text, td, text, td, text, td, text] 65 console.log(languageChildNodes.length); // 11 66 for(var i = 0; i < languageChildNodes.length; i++){ 67 alert(languageChildNodes[i].innerHTML); // 依次出现undefined、Chinese、undefined、English、undefined、Russian、 68 // undefined、Japanese、undefined、English、undefined的弹窗 69 } 70 // childNodes属性会获取包括文本节点在内的所有节点 71 // 根据DOM标签标签间的空白也会被当成文本节点（除了IE8及以下的浏览器不会） 72 // IE8及以下浏览器返回4个子节点，其他类似Chrome、Firefox、IE9都返回9个元素节点 73 // 解决方法：将34 ~ 40行代码写成一行，标签之间不要有空白，即： 74 // <tr id="language"><td>Chinese</td><td>English</td><td>Russian</td><td>Japanese</td><td>English</td></tr> 75 } 76 // firstChild 属性，表示当前节点的第一个子节点 77 var btn03 = document.getElementById("btn03"); 78 btn03.onclick = function(){ 79 var city = document.getElementById("city"); 80 var cityFirstChildNode = city.firstChild; 81 console.log(cityFirstChildNode); // #text空白文本节点 82 // firstElementChild获取当前元素的第一个子元素，不支持IE8以下浏览器 83 var cityFirstElementChild = city.firstElementChild; 84 alert(cityFirstElementChild.innerHTML); // Beijing 85 } 86 // lastChild 属性，表示当前节点的最后一个子节点 87 // 与firstChild同理 88 </script> 89 </body> 90 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM对象元素节点查询3</title> 6 </head> 7 <body> 8 <table id="tableId" border="1"> 9 <tr id="country"> 10 <td id="China">China</td> 11 <td>America</td> 12 <td>Russia</td> 13 <td>Japan</td> 14 <td>India</td> 15 </tr> 16 <tr id="city"><td>Beijing</td><td>new York</td><td>Moscow</td><td>Tokyo</td><td>New Delhi</td></tr> 17 <tr id="language"> 18 <td>Chinese</td> 19 <td>English</td> 20 <td>Russian</td> 21 <td>Japanese</td> 22 <td>English</td> 23 </tr> 24 </table> 25 <br> 26 <button id="btn01">按钮01</button> 27 <button id="btn02">按钮02</button> 28 <button id="btn03">按钮03</button> 29 <button id="btn04">按钮04</button> 30 <button id="btn05">按钮05</button> 31 <input type="text" id="inputId"> 32 33 <script> 34 // 继续上一次的html代码，上次写的script很多写法是相同的， 35 // 为此我们可以定义一个函数，专门用来为指定元素绑定单击响应函数 36 // btnNumStr是按钮的id，fun是回调函数 37 function btnclick(btnNumStr,fun){ 38 var btn = document.getElementById(btnNumStr); 39 btn.onclick = fun; 40 } 41 42 // 父节点：parentNode 43 btnclick("btn01",function(){ 44 var ChinaTd = document.getElementById("China"); 45 var ChinaParentNode = ChinaTd.parentNode; // 返回id为China的父节点 46 // innerText 可以获取元素内部的文本内容，和innerHTML类似，会自动将标签去除，只留文本 47 console.log(ChinaParentNode.innerText); // China America Russia Japan India 48 }); 49 50 // 兄弟节点：previousSibling 返回上一个兄弟节点；nextSibling 返回下一个兄弟节点 51 btnclick("btn02",function(){ 52 var cityTr = document.getElementById("city"); 53 var cityPreviousSibling = cityTr.previousSibling; 54 console.log(cityPreviousSibling.innerText); // 获取到空白文本，undefined 55 // previousElemnetSibling 获取上一个兄弟元素，IE8及以下不支持 56 var cityPreviousElemnetSibling = cityTr.previousElementSibling; 57 alert(cityPreviousElemnetSibling); // [object HTMLTableRowElement] 58 alert(cityPreviousElemnetSibling.innerHTML); // <td id="China">China</td> 59 // <td>America</td> 60 // <td>Russia</td> 61 // <td>Japan</td> 62 // <td>India</td> 63 }); 64 btnclick("btn03",function(){ 65 var cityTr = document.getElementById("city"); 66 var cityNextSibling = cityTr.nextSibling; 67 console.log(cityNextSibling.innerText); // 获取到空白文本，undefined 68 // nextElemnetSibling 获取下一个兄弟元素，IE8及以下不支持 69 var cityNextElemnetSibling = cityTr.nextElementSibling; 70 alert(cityNextElemnetSibling); // [object HTMLTableRowElement] 71 alert(cityNextElemnetSibling.innerHTML); // <td>Chinese</td> 72 // <td>English</td> 73 // <td>Russian</td> 74 // <td>Japanese</td> 75 // <td>English</td> 76 }); 77 78 // 获取文本框的属性值 79 btnclick("btn04",function(){ 80 // 打印id为inputId的输入框的属性值 81 var inputValue = document.getElementById("inputId"); 82 alert(inputValue.value); // 在文本输入框中输入什么，按下按钮后弹出的弹窗就会显示什么 83 // 修改inputValue的属性值 84 inputValue.value = "今天天气不错~" 85 alert("修改后的内容为："+inputValue.value); // 弹窗内容：修改后的内容为：今天天气不错~ 86 }); 87 88 // nodeValue 文本节点可以通过nodeValue属性获取和设置文本节点的内容 89 btnclick("btn05",function(){ 90 var China = document.getElementById("China"); 91 alert("China.innerHTML："+China.innerHTML); // China.innerHTML：China，最简洁的写法 92 alert("China.innerText："+China.innerText); // China.innerText：China 93 alert("China.firstChild.nodeValue："+China.firstChild.nodeValue); // China.firstChild.nodeValue：China，文本节点 94 }) 95 </script> 96 </body> 97 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM对象元素节点查询4</title> 6 </head> 7 <body> 8 <ul> 9 <li id="liId">社会主义</li> 10 <li id="liId">资本主义</li> 11 <li id="liId">封建主义</li> 12 <li id="liId">法西斯主义</li> 13 <li id="liId">共产主义</li> 14 </ul> 15 <button id="btn01">按钮01</button> 16 <button id="btn02">按钮02</button> 17 <button id="btn03">按钮03</button> 18 19 <script> 20 // document.querySelector() 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 21 // 虽然IE8中没有getElementByClassName()但是可以使用querySelector()代替，使用该方法总会返回唯一一个元素 22 // 如果满足条件的元素有多个，那么它只会返回第一个 23 var btn01 = document.getElementById("btn01"); 24 btn01.onclick = function(){ 25 var qSLiId = document.querySelector("#liId"); 26 console.log(qSLiId); // <li id="liId">社会主义</li> 27 console.log(qSLiId.innerHTML); // 社会主义 28 } 29 30 // document.querySelectorAll()该方法与document.querySelecto()用法类似 31 // 不同的是它会将满足条件的元素封装到一个数组中返回，就算符合条件的元素只有一个，也会返回一个数组对象 32 var btn02 = document.getElementById("btn02"); 33 btn02.onclick = function(){ 34 var qSALiId = document.querySelectorAll("#liId"); 35 console.log(qSALiId); // NodeList(5) [li#liId, li#liId, li#liId, li#liId, li#liId] 36 console.log(qSALiId.innerHTML); // undefined 37 for(var i = 0; i < qSALiId.length; i++){ 38 alert(qSALiId[i].innerHTML); 39 } 40 } 41 42 // 其他查询方式 43 var btn03 = document.getElementById("btn03"); 44 btn03.onclick = function(){ 45 alert(document.body); // [object HTMLBodyElement] 代表页面内的body元素 46 alert(document.documentElement); // [object HTMLHtmlElement] 代表页面的html元素 47 alert(document.all); // [object HTMLAllCollection] 代表页面内所有的元素 48 } 49 </script> 50 </body> 51 </html>
最后想说：
上面代码的console.log()和alert()，运行结果都写在该行的注释后面，所使用的浏览器是Chrome浏览器
不建议使用IE浏览器，虽然IE9及以上浏览器运行结果应该都差不多，但是IE8及以下是真的不行（重点批斗对象）
都2200年了应该不会有人还在用IE8吧...不会吧不会吧不会吧...如果不想用Chrome的话可以用Firefox浏览器
该篇随笔适合有一定html、css、JS基础的复习，随便看看也行啦
如果想更深入研究建议自行查看 https://www.w3school.com.cn/index.html