DOM节点访问关系与操作示例

最新推荐文章于 2019-12-29 21:16:40 发布

起风了9527

最新推荐文章于 2019-12-29 21:16:40 发布

阅读量496

点赞数

分类专栏： DOM JavaScript 文章标签： dom javascript 前端

本文链接：https://blog.csdn.net/qq_29036809/article/details/76650791

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

一.DOM 访问关系（节点的获得）

节点的访问关系，是以属性的方式存在的。
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点（ parentNode ）

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

   //box1是box的父节点
    var box2 = document.getElementsByClassName("box2")   [0];
    var box2 = document.getElementById("box2")
    console.log(box2.parentNode);//在控制台中打印父盒子box1

兄弟节点

Sibling就是兄弟的意思。
Next：下一个的意思。
Previous:前一个的意思。

nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。

nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。

总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling

//通常的代码书写格式
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

//nextElementSibling下一个兄弟节点
console.log(box2.nextElementSibling);

previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。

previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。

//通常的代码书写格式
前一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。

firstElementChild:在火狐谷歌IE9都指的第一个元素节点。

//通常的代码书写格式
第一个子节点=父节点.firstElementChild || 父节点.firstChild

lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。

lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。

//通常的代码书写格式
第一个子节点=父节点.lastElementChild|| 父节点.lastChild

所有子节点

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（他还是W3C的亲儿子）

火狐谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点记住元素就是标签
nodeType == 2 表示是属性节点了解
nodeType == 3 是文本节点了解

//通常的代码书写格式
子节点数组 = 父节点.childNodes;   //获取所有节点。

children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中，注释节点不要写在里面。

//通常的代码书写格式
子节点数组 = 父节点.children;   //用的最多。

DOM的节点操作

获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
注意：IE6、7不支持。
调用者：节点。有参数。没有返回值。
每一个方法意义不同。

创建

var aaa = document.createElement("li");
var bbb = document.createElement("afadsfadsf");
    console.log(aaa);//box中多出li标签
    console.log(bbb);//box中多出afadsfadsf标签

添加

   var box1 = document.getElementsByClassName("box1")[0];
    box1.appendChild(aaa);
    box1.insertBefore(bbb,aaa);//在bbb之前添加aaa

删除

 box1.removeChild(bbb);
    aaa.parentNode.removeChild(aaa);//自杀，自己删除自己

克隆

var ccc = box1.cloneNode();//只克隆节点本身不克隆内容
    var ddd = box1.cloneNode(true);//克隆节点本身和节点内容
    console.log(ccc);
    console.log(ddd);

总体代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div class="box1">
    <div class="box2" id="box2"></div>
    <div class="box3"></div>
</div>

<script>

    //节点的访问关系是以属性形式存在

    //1.box1是box的父节点
//    var box2 = document.getElementsByClassName("box2")[0];
//    var box2 = document.getElementById("box2")
//    console.log(box2.parentNode);
//
//    //2.nextElementSibling下一个兄弟节点
//    console.log(box2.nextElementSibling);
//
//    //firstElementChild第一个子节点
//    console.log(box2.parentNode.firstElementChild);
//
//    //所有子节点
//    console.log(box2.parentNode.childNodes);
//    console.log(box2.parentNode.children);



    //节点的操作
    //1.创建
    var aaa = document.createElement("li");
    var bbb = document.createElement("afadsfadsf");
    console.log(aaa);
    console.log(bbb);

    //添加
    var box1 = document.getElementsByClassName("box1")[0];
    box1.appendChild(aaa);
    box1.insertBefore(bbb,aaa);

    //删除
    box1.removeChild(bbb);
    aaa.parentNode.removeChild(aaa);//自杀，自己删除自己

    //克隆
    var ccc = box1.cloneNode();//只克隆节点本身不克隆内容
    var ddd = box1.cloneNode(true);//克隆节点本身和节点内容
    console.log(ccc);
    console.log(ddd);

</script>
</body>
</html>

节点属性的操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {

            var eleNode = document.getElementsByTagName("img")[0];

            //属性、赋值获取两种方式
            //1.元素节点.属性或者元素节点[属性]
            eleNode.src = "image/jd2.png";
            eleNode.aaa = "bbb";
            console.log(eleNode.aaa);
            console.log(eleNode.src);
            console.log(eleNode.tagName);
            console.log(eleNode["title"]);
            console.log(eleNode["className"]);
            console.log(eleNode["alt"]);

            //2.元素节点.方法();
            console.log(eleNode.getAttribute("id"));
            eleNode.setAttribute("id","你好");
            eleNode.setAttribute("ccc","ddd");

            eleNode.removeAttribute("id");
        }
    </script>
</head>
<body>
<img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>
</body>
</html>