JS DOM对象

一.DOM介绍

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式

二.DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

节点(自身)属性:

attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值

导航属性:

parentNode - 节点（元素）的父节点 (推荐)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点

推荐导航属性：

parentElement              // 父节点标签元素

children                   // 所有子标签
  
firstElementChild          // 第一个子标签元素

lastElementChild           // 最后一个子标签元素

nextElementtSibling       // 下一个兄弟标签元素

previousElementSibling    // 上一个兄弟标签元素

节点树中的节点彼此拥有层级关系。

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

页面查找：

通过使用 getElementById() 方法
通过使用 getElementsByClassName() 方法
通过使用 getElementsByName() 方法
通过使用 getElementsByTagName() 方法
注意带Elements关键字的方法取得是一个数组需要用[0]才能取出找到的元素

<body>
<div id="div1">
    <div class="div2">i am div2</div>
    <div name="zhangsan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>
    var div1=document.getElementById("div1");
    var ele = div1.getElementsByTagName("p")[0];
    console.log(ele);
    console.log(ele.innerHTML);
    ele.innerHTML="innerHTML"
    console.log(ele.innerHTML);

    //parentElement              // 父节点标签元素
    //children                   // 所有子标签
    //firstElementChild          // 第一个子标签元素
    //lastElementChild           // 最后一个子标签元素
    //nextElementtSibling       // 下一个兄弟标签元素
    //previousElementSibling    // 上一个兄弟标签元素

   　//innerHTML 提取所找到元素里面内容，包括标签，并且显示出来
　　　//innerText 只提取所找到元素里面内容，不包括标签

    var p_ele = ele.parentElement;
    console.log(p_ele);  //div1
    console.log(p_ele.firstElementChild);  //div2

    var l_ele = p_ele.lastElementChild;  //p
    console.log(l_ele.innerHTML);  //innerHTML

    var name_ele = document.getElementsByName("zhangsan")[0];
    console.log(name_ele);  //name=zhangsan
    console.log(name_ele.innerHTML);  //i am div2

    console.log(name_ele.previousElementSibling);  //div2
    console.log(name_ele.nextElementSibling);  //div3

</script>
</body>

eg:

<div id="div1">
    <div class="div2">i am div2</div>
    <div name="zhangsan">i am div2</div>
    <div id="div3">i am div2<p>pppp</p>></div>
    <p>hello p</p>
</div>

<script>
    var div1=document.getElementById("div1");
    var ele = div1.getElementsByTagName("p")[0];
    console.log(ele);
    console.log(ele.innerHTML);
    //ele.innerHTML="innerHTML"
    console.log(ele.innerHTML);

    //parentElement              // 父节点标签元素
    //children                   // 所有子标签
    //firstElementChild          // 第一个子标签元素
    //lastElementChild           // 最后一个子标签元素
   // nextElementtSibling       // 下一个兄弟标签元素
    //previousElementSibling    // 上一个兄弟标签元素
    var p_ele = ele.parentElement;
    console.log(p_ele);  //div1
    console.log(p_ele.firstElementChild);  //div2

    var l_ele = p_ele.lastElementChild;  //p
    console.log(l_ele.innerHTML);  //innerHTML

    var name_ele = document.getElementsByName("zhangsan")[0];
    console.log(name_ele);  //name=zhangsan
    console.log(name_ele.innerHTML);  //i am div2

    console.log(name_ele.previousElementSibling);  //div2
    var div3_ele = name_ele.nextElementSibling; //div3
    console.log(div3_ele.innerHTML);  //  i am div2<p>innerHTML</p>&gt;
    console.log(div3_ele.innerText); // i am div2 ppp

    div3_ele.innerHTML="<span>div33333</span>";
    console.log(div3_ele.innerHTML); //<span>div33333</span>
    console.log(div3_ele.innerText);  //div33333

    div3_ele.innerText="333";
    console.log(div3_ele.innerText);  //333

</script

参考：

https://www.cnblogs.com/yuanchenqi/articles/5980312.html

猜你喜欢