JS-Dom-进阶一（选择器）

查找HTML元素

<div id="parent">
    <div class="son">

    </div>
    <div name="byName">
        hello
    </div>
    <p class="son">今天天气很好</p>
   </div>

注意事项：

 ① ID不能重名，如果ID重复，只能取到第一个。

 ② 获取元素节点时，必须等到DOM树加载完成后才能获取。
      两种处理方式： a.将JS写在文档最后； 
                    b.将代码写入window.onload函数中；
 ③ 通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。

let app = document.getElementById("parent")//运用id名找到元素

let appSon = document.getElementsByName("byName")//运用name名找到元素

let appclass = document.getElementsByClassName("son")//运用类名找到元素


let appclass1 = app.getElementsByClassName("son")//通过父级找到子元素，以上都是在window中寻找，此次在app父级中查找


 let appTag= document.getElementsByTagName("p")//标签名查找元素
 let appName = document.querySelector(".parent")//通过选择器名称找到元素
 let son= document.querySelectorAll(".son")//通过选择器名称找到所有名字相同元素，返回数组格式

节点操作首先要获取到节点
1、创建节点

var para = document.createElement("p");``

2、为 para 元素创建一个新的文本节点：

var node = document.createTextNode("这是一个新的段落。");

3、将文本节点添加到 para 元素中：

para.appendChild(node);

4、将para添加到已有的app元素中，添加新元素到尾部。
新元素添加到开始位置，可以使用 insertBefore() 方法:

app.appendChild(para);

5、从父元素中移除子节点：

app.removeChild(son)

6、已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）

let appclass1 = app.getElementsByClassName("son")
appclass1.parentNode.removeChild(child);

7、使用 replaceChild() 方法来替换 HTML DOM 中的元素。

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

8、子节点

console.log(app.children)//所有子级
console.log(app.childNodes)//包括text内的所有子节点
console.log(appclass[0].parentElement)//父级
console.log(appclass[0].nextElementSibling)//同级下一个兄弟元素
console.log(appSon[0].previousElementSibling)//同级上一个兄弟元素

　firstElementChild第一个子节点

lastElementChild最后一个子节点

 nextElementSibling下一个子节点

previousElementSibling前一个子节点