Javascript Dom元素获取和添加详解

时间：2021-05-28

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章