DOM节点的增加,删除,修改,查找

前言:最近开始晚睡了,不知道为什么睡不太着,有时候有一些莫名的压力感,有时候又有一些莫名的兴奋感。今天看完了《下一个倒下的会不会是华为》,对于华为的整个企业的文化和发展都有一个全新的认识,但是让自己感悟更加深刻地则是华为的狼性文化,垫子文化。还是步入正题吧…

1、每一个节点都有nodeType属性,表面节点的类型。我们通过nodeType的具体值来判断具体是什么节点。此外每个节点也都有nodeName属性,获取节点的名称。下面通过一个简单的例子说明

var oDiv1 = document.querySelector("#div1");
console.log(oDiv1.nodeName+"--"+oDiv1.nodeType);  //DIV--1

如果是普通的元素节点,也就是div,p等,那么nodeType的值就是1,如果是文本节点,也就是元素节点中的具体内容,那么nodeType的值就是3。


2、每一个节点都有childNodes属性,返回的是一个NodeList,通过下面的例子,我们可以获取到所有的子节点


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcometitle>
    <style>
    style>
head>
<body>
    <div id="div1">
        <p>1p>
        <p>2p>
        <p>3p>
        <p>4p>
        <p>5p>
        <p>6p>
    div>
    <script>
    window.onload = function() {
        var oDiv1 = document.querySelector("#div1");
        for(var i=0; i < oDiv1.childNodes.length; i++) {
            if(oDiv1.childNodes[i].nodeType === 1) {
                console.log(oDiv1.childNodes[i]);
            }
        }
    }
    script>
body>
html>

其中结果如下:
DOM节点的增加,删除,修改,查找_第1张图片


3、firstChild,lastChild,nextSibling,previousSibling,parentNode的关系(已经淘汰,有更好的方法)
DOM节点的增加,删除,修改,查找_第2张图片
4、hasChildNodes属性
判断该节点是否有叶子节点。
5、节点的增加append , insertBefore

//追加节点
var oDiv1 = document.querySelector("#div1");
var oP = document.createElement("p");
oP.innerHTML = "1";
oDiv1.appendChild(oP);

//指定位置插入节点

/*插入最后,和append的效果一样*/
var oDiv1 = document.querySelector("#div1");
var oP = document.createElement("p");
oP.innerHTML = "a";
oDiv1.insertBefore(oP,null);
/*插入最前面*/
var oDiv1 = document.querySelector("#div1");
var oP = document.createElement("p");
oP.innerHTML = "a";
oDiv1.insertBefore(oP,oDiv1.firstChild);
/*插入第二个节点*/
var oDiv1 = document.querySelector("#div1");
var oP = document.createElement("p");
oP.innerHTML = "a";
oDiv1.insertBefore(oP,oDiv1.childNodes[2]);

6、节点的替换replaceChild

//替换第二个节点,这里要注意节点的类型。(第一种方法)
var oDiv1 = document.querySelector("#div1");
var oP = document.createTextNode("a");
oDiv1.replaceChild(oP,oDiv1.childNodes[3]);

//替换第二个节点(第二种方法)
var oDiv1 = document.querySelector("#div1");
var oP = document.createElement("p");
oP.innerHTML = "a";
oDiv1.replaceChild(oP,oDiv1.childNodes[3]);

7、节点的删除removeChild

//同样需要注意节点的类型,所以下标是移除节点的2n-1
var oDiv1 = document.querySelector("#div1");
oDiv1.removeChild(oDiv1.childNodes[3]);

节点的复制不太清除具体用在哪里,暂时就不总结了

你可能感兴趣的:(JavaScript)