DOM节点及其相关操作的函数
DOM:文档对象模型
1、查找节点
- document.getElementById(‘id’):返回指定id的元素节点,不可以链式调用
<div id = 'box'></div>
<script>
let box = document.getElementById('box');
</script>
- document.getElementsByClassName(‘class’):返回指定class属性的元素节点集合
<div class = 'box'></div>
<script>
let box = document.getElementsByClassName('box');
</script>
- document.getElementsByName(name):返回带有指定名称的对象的集合 NodeList 对象
<html>
<head>
<script type="text/javascript">
let x=document.getElementsByName("myInput");
</script>
</head>
<body>
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
</body>
</html>
- document.getElementsByTagName(tagName) :返回带有指定标签名的所有元素的集合 HTMLCollection 对象。
document.getElementsByTagName('p')
- document.qureySelector():返回指定标签名或者id或者class的元素节点,在是哟原生js写一些效果时常用
let maxRight = document.querySelector('.max-img-right');
- document.qureySelectorAll():返回指定标签名或者id或者class的元素节点集合,在是哟原生js写一些效果时常用与获取创建的一组同类型的元素节点
let img = document.querySelectorAll('.box img');
2、DOM对象节点遍历:
(1)、遍历节点树
-
parentNode:父节点,顶端是document
-
childNodes:指定元素的所有子节点
-
firstChild:指定元素的第一个子节点
-
lastChild:指定元素的最后一个子节点
-
nextSibling:指定元素的后一个兄弟节点
-
previousSibling:指定元素的前一个兄弟节点
注意:
- 获取的节点包括换行等,不仅仅包括元素中的标签
(2)、元素节点树的遍历:
-
parentElement:返回当前元素的父元素节点(最顶端为html元素)
-
children:只返回当前元素的元素子节点
注意:
node.childElementCount === node.children.length 当前元素节点的子元素节点个数 -
firstElementChild:返回的是第一个元素节点
-
lastElementChild:返回的是最后一个元素节点
-
nextElementSibling:返回后一个兄弟元素节点
-
previousElementSibling:返回前一个兄弟元素节点
【注】IE 不支持
3、获取元素内容
(1)innerHTML:一般的元素都可以使用
box.innerHTML = '改变元素内容';
(2)innerText:用于改变元素文本内容
p.innerText = '改变元素文本内容';
(3)value:一般用于input元素值的获取,获取出来的值一般是String类型的
input.value = '可以获取也可以改变input框的内容';
(4)outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身,不常用
4、获取和改变元素属性
(1)获取属性:
- 标准属性:比如id,src等等
document.getElementById('box').attr = '新的值';
document.getElementsByClassName('class')[0].className = '新的值';
input.value = '新的值';
img.src = '新的值';
- 自定义属性:比如data-name = ‘name’,自定义属性可以使用getAttribute()或者dataset获取;通过setAttribute(属性,属性值)来设置任意属性;使用hasAttribute()来检测某个属性在指定元素中是否存在;使用removeAttribute()来移除指定的属性
box.dataset.myattr;
box.getAttribute('data-name');
box.setAttribute('width','100');
box.hasAttribute('height');
box.removeAttribute('width');
- 定义class属性:通过classList.add()为元素添加class属性;通classList.remove()移除类名;使用classList.contains()来判断某元素中是否存在指定的class属性值,返回true或false
box.classList.add('box');
box.classList.remove('box');
box.classList.contains('box');
5、改变元素样式
style:仅能获取行内样式,不能获取内嵌的样式和外链的样式
document.getElementById('box').style.height = '100px';
document.getElementById('box').style.display = 'none';
6、创建节点
- 常用document.createElement(‘元素名’),它创建的节点可以设置各种属性但是不会在页面显示
- 使用parentNode.appendChild(childNode)来添加节点,可以让其渲染在页面上
document.body.appendChild(document.createElement('img'));
7、复制节点、删除节点、替换节点
-
使用cloneNode()复制节点,复制节点会赋值其中的所有内容包括子节点
-
使用removeChild()来删除节点,相当于从父节点中剪切掉某个子节点
注意:
node.remove()会直接销毁节点自身 -
使用replaceChild()来替换某个节点
body.cloneNode(body.firstChild());
body.removeChild(body.lastChild());
box.remove();
body.replaceChild(box,input);