Javascript Dom元素获取和添加详解
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 class="test">1</li> <li class="test">2</li> <li class="test">3</li> <li class="test">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 class='test'>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 name="viewport" content="initial-scale=2.0"> <title>Test</title> </head> <body> <ul> <li class="test">1</li> <li class="test">2</li> <li class="test">3</li> <li class="test">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 id="box" 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属性:下一个兄弟元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li id="test">2</li> <li>3</li> </ul> </body> </html> <script> // 获取id为test的li元素 var li = document.querySelector('#test') // 获取兄弟元素 var preBrother = li.previousElementSibling var nextBrother = li.nextElementSibling console.log(preBrother.innerHTML) // 1 console.log(nextBrother.innerHTML) // 3 </script>
注意:
children与childNodes,前者只包含元素节点,而后者为元素节点+文本节点(回车换行也算是文本节点)
而previousElementSibling与previousSibling,nextElementSibling与nextSibling也一个道理
firstChild和lastChild:firstChild等价于childNodes[0],lastChild相当于childNodes的最后一个元素
4.DOM元素的添加与移除
添加子元素
appendChild():将目标元素作为子元素添加到当前元素的最后面
insertBefore():将目标元素作为子元素添加到当前元素中,位置可以自由选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li id="test">2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 创建li元素 var liNode = document.createElement('li') liNode.innerHTML = "4" // 将创建的li元素添加到ul中(最后面) ul.appendChild(liNode) // 再创建li元素 var liNode2 = document.createElement('li') liNode2.innerHTML = "life" var li_test = document.querySelector('#test') // 将创建的li元素添加到ul中(li_test的前面) ul.insertBefore(liNode2,li_test) </script>
运行结果
<ul> <li>1</li> <li>life</li> <li id="test">2</li> <li>3</li> <li>4</li> </ul>
删除子元素和替换子元素
removeChild():删除子元素
replaceChild():替换子元素
语法:parent.removeChild(child)
语法:parent.removeChild(替换的元素, 被替换的元素)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li id="test">2</li> <li id="replace">3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取要删除的li元素 var li_test = document.querySelector('#test') // 删除子元素 ul.removeChild(li_test) // 获取要替换的li元素 var li_replace = document.querySelector('#replace') // 创建要替换的元素 var newLI = document.createElement('li') newLI.innerHTML = "replace li tag" // 替换元素 ul.replaceChild(newLI,li_replace) </script>
运行结果:
<ul> <li>1</li> <li>replace li tag</li> </ul>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:微信小程序全局变量的设置、使用、修改过程解析