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);

DOM节点及其相关操作的函数

DOM节点及其相关操作的函数

猜你喜欢