Javascript Dom元素获取和添加详解
2019-09-24 11:24
1411 查看
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>
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 02JavaScript动画DOM——获取节点、动态创建、添加、修改、删除、克隆元素
- JS获取动态添加元素的方法详解
- 用JavaScript获取DOM元素位置和尺寸大小的方法
- javascript,jquery动态添加dom元素，并设定css属性，点击事件
- JavaScript DOM中获取元素节点的父节点和父节点名
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- JavaScript DOM 中当将一个元素添加到其他的元素中时，原来的元素被删除
- JavaScript DOM 中获取元素属性
- javascript DOM添加元素,使用节点属性
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript获取HTML DOM节点元素详解
- python Web：JavaScript __6、DOM节点操作（增删改查）、获取或设置属性节点的值、操作元素样式
- JavaScript学习笔记:使用DOM获取元素
- JavaScript DOM中获取元素节点的父节点和父节点名
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- JavaScript DOM 中当将一个元素添加到其他的元素中时，原来的元素被删除
- JavaScript DOM笔记：获取及操作元素
- JavaScript DOM 中获取元素属性
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript获取HTML DOM节点元素详解