获取DOM元素/节点/获取子（父/相邻）节点（元素）/节点增删改查/元素属性操作

转自 : https://blog.csdn.net/weixin_42139212/article/details/102789639

DOM

window：全局对象。每个窗口都是一个window对象
document：window的一个属性。也是一个对象。代表当前的整个网页。保存了网页上的所有内容。通过document对象可以操作网页上的内容。
DOM：document object model 文档对象模型。定义了访问和操作HTML文档（网页）的标准方法。通过document对象操作网页上的内容。
DOM元素：HTML标签
获取DOM元素

通过DOM返回的都是对象

<div class="father">
    <form>
        <input type="text" name="test">
        <input type="password" name="test">
    </form>
</div>
<div class="father" id="box">我是div</div>

通过id名获取

由于id具有唯一性。如果找到就返回一个dom对象，找不到就返回null

    var oDiv = document.getElementById('box');
    console.log(oDiv);//<div class="father" id="box">我是div</div>

通过class名获取

由于class名具有重复性。如果找到返回一个存储了标签对象的数组，找不到返回一个空数组

    let oDivs = document.getElementsByClassName("father");
    console.log(oDivs);//HTMLCollection(2) [div.father, div#box.father, box: div#box.father]

通过name名获取

一般用于表单标签，由于name具有重复性。如果找到就返回一个存储了标签对象的数组。找不到就返回一个空数组

    let oDivs = document.getElementsByName('test');
    console.log(oDivs);//NodeList(2) [input, input]

通过标签名获取

由于标签名可重复。如果找到就返回一个存储了标签对象的数组。找不到就返回一个空数组

    let oDivs =  document.getElementsByTagName("div");
    console.log(oDivs);//HTMLCollection(2) [div.father, div#box.father, box: div#box.father]

通过选择器获取

querySelector只会返回根据指定选择器找到的第一个元素

    let oDiv =  document.querySelector('input');
    console.log(oDiv);//<input type="text" name="test">

querySelectorAll会返回指定选择器找到的所有元素

    let oDivs = document.querySelectorAll(".father");
    console.log(oDivs);//NodeList(2) [div.father, div#box.father]

节点

网页中最基本的组成 每一个部分都是一个节点
标签和标签之前的空格/回车 标签的属性 标签 都是节点

节点的三个属性：

nodeName : 节点的名称，只读

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

nodeValue ：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

nodeType ：节点的类型

元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

常用的节点类型：

1.文档节点：整个html文档（代表整个网页）

2.元素节点：html标签

3.属性节点：元素的属性

4.文本节点：标签中的文本内容

元素 === 标签
获取指定元素的子节点和子元素

<div>
    <h1>1</h1>
    <h2>2</h2>
    <p class="item">3</p>
    <p>4</p>
    <span>5</span>
</div>

对象.children获取子元素（子标签）

<script>
    let oDiv = document.querySelector('div');
    console.log(oDiv.children);//HTMLCollection(5) [h1, h2, p.item, p, span]
    console.log(oDiv.childNodes);//NodeList(11) [text, h1, text, h2, text, p.item, text, p, text, span, text]
</script>

对象.childNodes获取子节点

	let oDiv = document.querySelector('div');
    console.log(oDiv.childNodes);//NodeList(11) [text, h1, text, h2, text, p.item, text, p, text, span, text]
    //标签和标签之间的回车也是一个节点(text节点）所以div标签一共有11个子节点

<script>
    let oDiv = document.querySelector('div');
    for(let node of oDiv.childNodes){  //遍历div的所有子节点
        if(node.nodeType === Node.ELEMENT_NODE){ //得到所有子标签
            console.log(node)
        }
    }
</script>

对象.firstChild 获取第一个子节点
对象.firstElementChild 获取第一个子标签

<script>
    let oDiv = document.querySelector('div');
    console.log(oDiv.firstChild);//#text 是div和h1之间的回车（空白text节点）
    console.log(oDiv.firstElementChild);//<h1>1</h1>
</script>

对象.lastChild 获取最后一个子节点
对象.lastElementChild 获取最后一个子标签

<script>
    let oDiv = document.querySelector('div');
    console.log(oDiv.lastChild);//#text 是</span>和</div>之间的回车（空白text节点）
    console.log(oDiv.lastElementChild);//<span>5</span>
</script>

对象.parentElement or 对象.parentNode获取某元素的父节点

<script>
    let oDiv = document.querySelector('.item');
    console.log(oDiv.parentNode);
</script>

获取相邻节点/元素

<script>
    let item = document.querySelector('.item');
    // 获取相邻上一个节点
    console.log(item.previousSibling);//#text 是p和</h2>之间的空白节点
    // 获取相邻上一个元素
    console.log(item.previousElementSibling);//<h2>2</h2>
    // 获取相邻下一个节点
    console.log(item.nextSibling);//#text 是</p>和<p>之间的空白节点
    // 获取相邻下一个元素
    console.log(item.nextElementSibling);//<p>4</p>
</script>

节点的增删改查
创建标签：document.createElement
添加节点：父节点.appendChild
插入节点：父节点.insertBefore(新节点，旧节点) 在父节点的指定旧节点之前插入新节点
删除节点：通过父节点删除，节点不能自己删除自己 节点.parentNode.removeChild(节点)
克隆节点：cloneNode

cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true

<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
<script>
    let oDiv = document.querySelector('div');
    let newDiv = oDiv.cloneNode(true);
    console.log(newDiv);
</script>

元素属性的增删改查

<img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">

元素属性的读取：元素.属性名 or 元素.getAttribute(‘属性名’)

通过 元素.属性名 的形式 不能访问到自定义的属性，会返回undefined
通过 元素.getAttribute(‘属性名’) 的形式能访问到自定义的属性

<script>
    let oImg = document.querySelector('img');
    console.log(oImg.alt);//我是alt222
    console.log(oImg.getAttribute('alt'));//我是alt222
    console.log(oImg.nj);//undefined
    console.log(oImg.getAttribute('nj'));//666
</script>

元素属性的更改： 元素.属性名 = 属性值 or 元素.setAttribute(‘属性名’,‘属性值’)

和元素属性的读取一样。通过 元素.属性名 = 属性值 的形式不能修改自定义的属性
通过 元素.setAttribute 的形式能修改自定义的属性

<script>
    let oImg = document.querySelector('img');
    oImg.title ='新的title';
    oImg.setAttribute("nj", "123");
</script>

元素属性的增加：元素.setAttribute(‘属性名’,‘属性值’)

setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改

oImg.setAttribute("it666", "itzb");

元素属性的删除：元素.removeAttribute(‘属性名’)

oImg.removeAttribute("nj");