1.Dom元素的获取
document.getElementById()：通过id获取一个Dom元素
document.getElementsByClassName()：通过class名字获取一个或多个Dom元素（伪数组）
document.getElementsByTagName()：通过标签名字获取一个或多个Dom元素（伪数组）
document.querySelector()：获取指定 CSS 选择器的一个元素
document.querySelectorAll()：获取指定 CSS 选择器的多个元素（伪数组）
ES6选择器与其他选中器的区别：
document.getElementsByTagName()和document.getElementsByClassName()获取到的都是动态列表
document.querySelectorAll()获取到的是静态列表,Dom结构发生变化要重新获取，不然会出问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html> <script> var lis = document.getElementsByTagName('li') var liByQuery = document.querySelectorAll('li') console.log(lis.length) // 4 console.log(liByQuery.length) // 4 // 动态添加li标签 document.querySelector('ul').innerHTML += "<li>5</li>" console.log(lis.length) // 5 console.log(liByQuery.length) // 4 </script>
document.getElementsByTagName()和document.getElementsByClassName()获取到的是 HTMLCollection，不能使用foreach()遍历
document.querySelectorAll()获取到的NodeList，可以使用foreach()遍历
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="initial-scale=2.0"> <title>Test</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html> <script> var li = document.getElementsByTagName('li') var li2 = document.getElementsByClassName('test') var li3 = document.querySelectorAll('li') var li4 = document.querySelector('ul').children console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test] console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test] console.log(li3) // NodeList(4) [li.test, li.test, li.test, li.test] console.log(li4) // HTMLCollection(4) [li.test, li.test, li.test, li.test] </script>
2.Dom元素节点类型
Dom节点类型分3类：元素节点,属性节点,文本节点
每种节点都有3种属性 nodeName,nodeType,nodeValue
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <div title="我在哪">我是谁</div> </body> </html> <script> // 获取元素节点 var box = document.querySelector('#box') // 元素节点的属性 console.log(box.nodeName);//DIV console.log(box.nodeType); //1 console.log(box.nodeValue); //一律为null // 根据属性名获取单个属性节点 var attrTitle = box.getAttributeNode("title") // 获取元素属性的集合(一个伪数组对象) var box_attributes = box.attributes // 属性节点的属性 console.log(attrTitle.nodeName);//title console.log(attrTitle.nodeType); //2 console.log(attrTitle.nodeValue); //"我在哪" // 获取box的文本节点（没有专门的方法用来获取文本节点，但是这个div的第一个子节点就是文本节点） var textNode = box.childNodes[0]; // 文本节点的属性 console.log(textNode.nodeName);//#text console.log(textNode.nodeType); //3 console.log(textNode.nodeValue); //"我是谁" </script>
3.获取Dom元素的子元素，父元素，兄弟元素
通过children属性可以获取当前Dom元素的子元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取ul子元素 var ul_children = ul.children // 遍历子元素 for(var i=0;i<ul_children.length;i++){ console.log(ul_children[i].innerHTML) // 1 // 2 // 3 } </script>
获取当前元素的父元素
parentElement/parentNode这两个属性都可以
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取父元素(ul的父级就是body) var parent = ul.parentElement var parentNode = ul.parentNode console.log(parent.nodeName) // BODY console.log(parentNode.nodeName) // BODY </script>
获取当前元素的兄弟元素
previousElementSibling属性：上一个兄弟元素
nextElementSibling属性：下一个兄弟元素