JavaScript--DOM对象

最新推荐文章于 2024-06-25 17:54:49 发布

huijie_0716

最新推荐文章于 2024-06-25 17:54:49 发布

阅读量986

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/huijie_0716/article/details/124384572

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

一、查看元素节点

节点类型：元素节点、属性节点、文本节点

节点关系：父子关系、同级关系

DOM接口：

Core DOM（核心DOM），适用于各种结构化文档；

XML DOM，专用于XML文档；

HTML DOM，专用于HTML文档；

二、元素节点

var oDiv = document.getElementsByTagName("div")[0];
    console.log(oDiv.nodeName); //节点名称 DIV
    console.log(oDiv.tagName); //标签名称 DIV
    console.log(oDiv.nodeType); //1 节点类型
    console.log(oDiv.nodeValue); //null 节点值

三、属性节点

    var attr = oDiv.getAttributeNode("id");
    console.log(attr); //id="box"
    alert(attr); //[object Attr]属性对象
    console.log(attr.nodeName); //节点名称 属性名 id
    console.log(attr.nodeType); //节点类型 属性名 2
    console.log(attr.nodeValue); //节点值 属性值 box
    // get获取、Attribute属性、Node节点

四、文本节点

    var ch = oDiv.firstChild; //第一个子节点
    console.log(ch); //"hello box"
    alert(ch); //[object Text] 文本对象节点
    console.log(ch.nodeName); //节点名称 文本 #text
    console.log(ch.nodeType); //节点类型 3
    console.log(ch.nodeValue); //节点值 文本值 hello box

五、父节点查找子节点

通过父节点对象查找子节点对象（可能会有文本节点）

父节点对象.firstChild 查找父节点下的第一个子节点

父节点对象.lastChild 查找父元素下的最后一个子节点

父节点对象.childNodes 多个查找父元素下的所有子节

通过父节点对象查找子元素节点对象

父节点对象.firstElementChild 查找父节点下的第一个子元素节点

父节点对象.lastElementChild 查找父元素下的最后一个子元素节点

父节点对象.child 多个查找父元素下的所有子元素节点

<body>
    <ul id="box">
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ul>
  </body>
  <script>
    var oUl = document.getElementById("box");
    console.log(oUl.firstChild);
    console.log(oUl.firstChild.nodeType); //3
    console.log(oUl.firstChild.nodeValue); //空

    console.log(oUl.childNodes.length); //7

    var elArr = [];
    for (var i = 0; i < oUl.childNodes.length; i++) {
      //   console.log(oUl.childNodes[i]);
      if (oUl.childNodes[i].nodeType === 1) {
        elArr.push(oUl.childNodes[i]);
      }
    }
    console.log(elArr);
  </script>

console.log(oUl.firstChild); //第一个子节点可能有文本节点换行

console.log(oUl.firstElementChild); //第一个元素节点

console.log(oUl.lastChild); //最后一个子节点可能有文本节点换行

console.log(oUl.lastElementChild); //最后一个元素节点

console.log(oUl.childNodes); //ul里所有的子节点对象

console.log(oUl.children); //ul里所有的子元素节点对象

六、子节点查找父节点

var oUl = document.getElementById("box");
    var oLi = document.getElementById("list");
    console.log(oLi.parentNode); //查找父节点
    console.log(oLi.parentElement); //查找父元素

子节点查找父节点

子节点对象.parentNode 通过子节点查找父节点

子节点对象.parentElement 通过子节点查找父元素

七、兄弟之间查找

console.log(oLi.nextSibling); //查找下一个兄弟节点可能为文本

console.log(oLi.nextElementSibling); //查找下一个元素兄弟节点

console.log(oLi.nextSibling.nodeValue);

console.log(oLi.previousSibling); //查找上一个兄弟节点可能为文本

// console.log(oLi.previousSibling.previousSibling);

console.log(oLi.previousElementSibling); //查找上一个元素兄弟节点

八、创建元素对象

创建元素对象

document.createElement("元素名称");

追加元素对象到父元素内部最后

父元素节点.appendChild(子节点);

huijie_0716

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--DOM对象

一、查看元素节点节点类型：元素节点、属性节点、文本节点节点关系：父子关系、同级关系DOM接口：Core DOM（核心DOM），适用于各种结构化文档；XML DOM，专用于XML文档；HTML DOM，专用于HTML文档；二、元素节点var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv.nodeName); //节点名称 DIV console.log(oDiv.tagName
复制链接

扫一扫

专栏目录