JavaScript 之 DOM [ Node对象 ]

Node对象

描述

Node对象是用于解析DOM节点树的入口
Node对象提供了对节点操作的属性和方法

判断节点类型

节点类型分为：
- 元素节点
- 属性节点
- 文本节点
- 文档节点
判断方式分为：
- nodeName - 节点名称
- nodeType - 节点类型
- nodeValue - 节点的值

<body>
<p id="p1" name="text">我是谁，我在那，我要干啥</p>
<script>
    /* 获取指定元素节点 */
    var p = document.getElementById( 'p1' );
    /* 判断指定节点的名称 - 显示标签名称 */
    console.log( p.nodeName );// 显示 P(大写)
    /* 判断指定节点的类型 */
    console.log( p.nodeType );// 显示 1(元素节点)
    /* 判断指定节点的属性值 */
    console.log( p.nodeValue );// 显示 null

    /* 获取指定元素节点的文本节点 */
    var text = p.firstChild;
    /* 判断指定节点的名称 */
    console.log( text.nodeName );// 显示 #text(文本节点的固定写法)
    /* 判断指定节点的类型 */
    console.log( text.nodeType );// 显示 3(文本节点)
    /* 判断指定节点的属性值 */
    console.log( text.nodeValue );// 显示 我是谁，我在那，我要干啥(文本内容)

    /* 获取指定元素节点的属性节点 */
    var shuxing = p.getAttributeNode( 'name' );
    /* 判断指定节点的名称 */
    console.log( shuxing.nodeName );// 显示 name(属性名)
    /* 判断指定节点的类型 */
    console.log( shuxing.nodeType );// 显示 2(属性节点)
    /* 判断指定节点的属性值 */
    console.log( shuxing.nodeValue );// 显示 text(属性值)
    
    /* 判断节点的类型 - 文档节点 */
    // document对象 表示html文档（html页面）
    console.log( document.nodeName );// 显示节点的名称 - #document（document对象）
    console.log( document.nodeType );// 显示节点的类型 - 9（文档节点）
    console.log( document.nodeValue );// 显示节点的值 - null
</script>
</body>

获取父节点

通过定位子节点，来获取父节点

parentNode属性

表示获取父节点，等到的不一定的元素节点，也可能是Document对象

<div id="d">
    <p>手机</p>
    <p id="p">手表</p>
    <p>电脑</p>
</div>
<script>
    /* 获取指定元素节点 */
    var p = document.getElementById( 'p' );

    /* 通过parentNode来获取指定元素节点的父节点 */
    var div1 = p.parentNode;
    console.log( div1 );
</script>
</body>

parentElement属性

表示获取父元素节点，等到的一定是元素节点

<div id="d">
    <p>手机</p>
    <p id="p">手表</p>
    <p>电脑</p>
</div>
<script>
    /* 获取指定元素节点 */
    var p = document.getElementById( 'p' );

    /* 通过parentElement来获取指定元素节点的父元素节点 */
    var div2 = p.parentElement;
    console.log( div2 );
</script>
</body>

获取子节点

通过定位父节点来获取子节点
childNodes：表示获取所有子节点
firstChild：表示获取第一个子节点
lastChild：表示获取最后一个子节点
在获取子节点时也会一同获取到“空白节点（可能是空的文本节点）”

<body>
<div id="d">
    <p>手机</p>
    <p id="p">手表</p>
    <p>电脑</p>
</div>
<script>
    /* 获取指定元素节点 */
    var div = document.getElementById( 'd' );

    /*
        在获取指定元素节点的子节点时，会出现空白节点，空白节点会影响获取的结果
     */

    /* 通过childNodes来获取指定元素节点的所有子节点 */
    var ps = div.childNodes;
    console.log( ps );// 显示 NodeList(7) [text, p, text, p#p, text, p, text](带有空白节点)

    /* 通过firstChild来获取指定元素节点中的第一个子节点 */
    var p1 = div.firstChild;
    console.log( p1 );// 显示 #text(空白节点 - 应该显示第一个元素节点)

    /* 通过lastChild来获取指定元素节点中的最后一个子节点 */
    var p2 = div.lastChild;
    console.log( p2 );// 显示 #text(空白节点 - 应该显示最后一个元素节点)
</script>
</body>

获取相邻兄弟节点

previousSibling：表示获取前面的兄弟节点
nextSibling：表示获取后面的兄弟节点
在获取相邻兄弟节点的时候也存在“空白节点（可能是空的文本节点）”的问题

<body>
<div id="d">
    <p>手机</p>
    <p id="p">手表</p>
    <p>电脑</p>
</div>
<script>
    /* 获取指定元素节点 */
    var p = document.getElementById( 'p' );

    /*
        在获取指定元素节点的相邻兄弟节点时，会出现空白节点，空白节点会影响获取的结果
     */

    /* 获取指定元素节点的前一个相邻兄弟节点 */
    var p1 = p.previousSibling;
    console.log( p1 );// 显示 #text(空白节点)

    /* 获取指定元素节点的后一个相邻兄弟节点 */
    var p2 = p.nextSibling;
    console.log( p2 );// 显示 #text(空白节点)
</script>
</body>

空白节点

在浏览器解析DOM节点树结构时，会产生空白节点，使得到的数据结果出现问题
空白节点是通过在编写HTML代码时由于元素换行或空格产生的
空白节点一般会显示为文本节点(可能是空的文本节点)

处理获取子节点时产生的空白节点

<body>
<div id="d">
    <p>手机</p>
    <p id="p">手表</p>
    <p>电脑</p>
</div>
<script>
    /* 获取指定元素节点 */
    var div = document.getElementById( 'd' );

    /* 在获取指定元素节点的子节点时，会出现空白节点，空白节点会影响获取的结果 */
    /* 通过childNodes来获取指定元素节点的所有子节点 */
    var ps = div.childNodes;
    console.log( ps );// 显示 NodeList(7) [text, p, text, p#p, text, p, text](带有空白节点)

    /* 通过firstChild来获取指定元素节点中的第一个子节点 */
    var p1 = div.firstChild;
    console.log( p1 );// 显示 #text(空白节点 - 应该显示第一个元素节点)

    /* 通过lastChild来获取指定元素节点中的最后一个子节点 */
    var p2 = div.lastChild;
    console.log( p2 );// 显示 #text(空白节点 - 应该显示最后一个元素节点)

    /* 处理获取子节点时产生的空白节点 */
    /*
        * 可以通过循环遍历得到全部节点数据
        * 在通过判断进行筛选
     */
    /* 定义一个空数组 */
    var arr = [];
    /* 通过循环获取所有子节点数据 */
    for ( var i=0; i<ps.length; i++ ) {
        /* 将所有的数据赋值给一个变量 */
        var s = ps[i];
        /* 判断所有节点的类型是否为元素节点 */
        if ( s.nodeType === 1 ) {
            /* 将得到的元素节点添加到指定数组中 */
            arr.push( s );
        }
    }
    /* 得到所有子节点中的有效数据 */
    console.log( arr );// 显示 (3) [p, p#p, p]

    /*
        * 由于空白节点与子节点是相邻兄弟关系
        * 可以通过获取相邻兄弟节点的方法来获取第一个或最后一个子节点
     */
    /* 获取第一个子节点后在获取下一个相邻兄弟节点，来得到正确显示结果 */
    p1 = p1.nextSibling;
    console.log( p1 );// 显示 <p>手机</p>
    /* 获取最后一个子节点后在获取前一个相邻兄弟节点，来得到正确显示结果 */
    p2 = p2.previousSibling;
    console.log( p2 );// 显示 <p>电脑</p>
</script>
</body>

处理相邻兄弟节点中的空白节点

<body>
<div id="d">
    <p>手机</p>
    <p id="p">手表</p>
    <p>电脑</p>
</div>
<script>
    /* 在获取指定元素节点的相邻兄弟节点时，会出现空白节点，空白节点会影响获取的结果 */
    /* 获取指定元素节点 */
    var p = document.getElementById( 'p' );

    /* 获取指定元素节点的前一个相邻兄弟节点 */
    var p3 = p.previousSibling;
    console.log( p3 );// 显示 #text(空白节点)

    /* 获取指定元素节点的后一个相邻兄弟节点 */
    var p4 = p.nextSibling;
    console.log( p4 );// 显示 #text(空白节点)

    /* 处理相邻兄弟节点中的空白节点 */
    /*
        * 由于空白节点与子节点是相邻兄弟关系
        * 可以通过连续获取两次相邻兄弟节点来得到正常显示节点
     */
    /* 在获取前一个相邻兄弟元素 */
    p3 = p3.previousSibling;
    console.log( p3 );// 显示 <p>手机</p>
    /* 在获取后一个相邻兄弟元素 */
    p4 = p4.nextSibling;
    console.log( p4 );// 显示 <p>电脑</p>
</script>
</body>

替换节点

replaceChild
- 表示对指定的元素节点进行替换

<body>
<div id="d1">
    <p id="p1">手机</p>
    <p id="p2">手表</p>
    <p id="p3">电脑</p>
</div>
<script>
    /*
        替换节点 - replaceChild
        表示对指定的元素节点进行替换
     */
    /* 创建元素节点 */
    var p = document.createElement( 'p' );
    /* 创建文本节点 */
    var ps = document.createTextNode( '游戏机' );
    /* 将创建的文本节点插入到创建的元素节点中 */
    p.appendChild( ps );
    /* 定位父节点位置 */
    var d1 = document.getElementById( 'd1' );
    /* 定位被替换节点的位置 */
    var p2 = document.getElementById( 'p2' );
    /* 进行替换节点（两个节点值  创建元素节点、被替换的节点位置） */
    d1.replaceChild( p, p2 );
</script>
</body>

插入节点

表示在指定位置插入节点
appendChild（）：表示在指定父节点中最后的位置插入节点
insertBefore（）：表示在指定目标节点的前面插入节点

<body>
<div id="d1">
    <p id="p1">手机</p>
    <p id="p2">手表</p>
    <p id="p3">电脑</p>
</div>
<script>
    /*
        插入节点
        表示在指定位置插入节点
        appendChild（）：表示在指定父节点中最后的位置插入节点
        insertBefore（）：表示在指定目标节点的前面插入节点
     */
    /* appendChild 方式 */
    /* 创建元素节点 */
    var p = document.createElement( 'p' );
    /* 创建文本节点 */
    var ps = document.createTextNode( '外设' );
    /* 将创建的文本节点插入到创建的元素节点中 */
    p.appendChild( ps );
    /* 定位指定父节点的位置 */
    var d1 = document.getElementById( 'd1' );
    /* 将创建的元素节点插入到指定父节点的最后位置 */
    d1.appendChild( p );

    /* insertBefore 方式 */
    /* 创建元素节点 */
    var px = document.createElement( 'p' );
    /* 创建文本节点 */
    var pxs = document.createTextNode( '游戏机' );
    /* 将创建的文本节点插入到创建的元素节点中 */
    px.appendChild( pxs );
    /* 定位指定目标元素节点的位置 */
    var p2 = document.getElementById( 'p2' );
    /*
        将创建的元素节点插入到指定目标元素节点的前面
        在口号里写两个值：创建的元素节点  目标元素节点的位置
     */
    d1.insertBefore( px, p2 );
</script>
</body>

删除节点

removeChild
- 表示删除指定的元素节点
被删除的元素节点只是在DOM节点数中被删除，并不是在内存中被删除,还可以在调用

<body>
<div id="d1">
    <p id="p1">手机</p>
    <p id="p2">手表</p>
    <p id="p3">电脑</p>
</div>
<script>
    /*
        删除节点 - removeChild
        表示删除指定的元素节点
        被删除的元素节点只是在DOM节点数中被删除，并不是在内存中被删除,还可以在调用
     */
    /* 定位指定父节点的位置 */
    var d1 = document.getElementById( 'd1' );
    /* 定位要删除的节点位置 */
    var p = document.getElementById( 'p2' );
    /* 删除指定节点 */
    d1.removeChild( p );
</script>
</body>

复制节点

cloneNode（）
- 括号中添写布尔值“true或false”
  - true：表示复制后代节点
  - false：表示不复制后代节点（默认值）
如果被复制的节点具有ID属性，复制后要修改ID属性的属性值

<body>
<div id="d1">
    <p id="p1">手机</p>
    <p id="p2">手表</p>
    <p id="p3">电脑</p>
</div>
<script>
    /*
        复制节点 - cloneNode（）
        括号中添写布尔值“true或false”
        true：表示复制后代节点
        false：表示不复制后代节点（默认值）
        如果被复制的节点具有ID属性，复制后要修改ID属性的属性值
     */
    /* 定位被复制的节点位置 */
    var p = document.getElementById( 'p2' );
    /* 复制目标节点 */
    var pp = p.cloneNode( true );
    /* 更改复制后的ID属性值 - ID属性的唯一性 */
    pp.setAttribute( 'id', 'pp2' );
    console.log( pp );
</script>
</body>

JavaScript 之 DOM [ Node对象 ]

Node对象

描述

判断节点类型

获取父节点

parentNode属性

parentElement属性

获取子节点

获取相邻兄弟节点

空白节点

处理获取子节点时产生的空白节点

处理相邻兄弟节点中的空白节点

替换节点

插入节点

删除节点

复制节点

蔡志远

引用和评论

Ajax 之 [ jQuery中的Ajax ]

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号