元素和节点的相关概念

最新推荐文章于 2024-04-16 14:37:56 发布

喵_美

最新推荐文章于 2024-04-16 14:37:56 发布

阅读量5.6k

点赞数 3

本文链接：https://blog.csdn.net/qq_34708564/article/details/90481087

版权

概念

文档：document
元素（element）：页面中所有的标签，即使元素也是节点
节点（node）：页面中所有的内容，包括标签、属性（标签的属性）、文本(文字,换行,空格,回车))
根元素:html标签

节点

节点的属性:(可以使用标签–元素.（点）出来,可以使用属性节点.出来,文本节点.点出来)
nodeType:节点的类型:1----标签,2—属性,3—文本
nodeName:节点的名字:标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点----#text
nodeValue:节点的值:标签节点—null,属性节点—属性值,文本节点—文本内容

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

</head>
<body>
  <div id="dv">
     <span>这是div中的第一个span标签</span>
     <p>这是div中的第二个元素,第一个p标签</p>
     <ul id="uu">
         <li>内容1</li>
         <li>内容2</li>
         <li id="three">内容3</li>
         <li>内容4</li>
     </ul>
   </div>

<script>
  var ulObj=document.getElementById("uu");
  console.log(ulObj.parentNode);//div
  console.log(ulObj.parentNode.parentNode);//body
  console.log(ulObj.parentNode.parentNode.parentNode);//html
  console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document
  console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null

  // ul标签的父级节点
  console.log(ulObj.parentNode);//dv
  // ul标签的父级元素
  console.log(ulObj.parentElement);//dv，说明标签即使元素也是节点

  //节点的个数比元素多
  console.log(ulObj.childNodes); //NodeList(9) [text, li, text, li, text, li#three, text, li, text]
  console.log(ulObj.children); //HTMLCollection(4) [li, li, li#three, li, three: li#three]
</script>
</body>
</html>

获取元素和节点的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
/head>
<body>
  <div id="dv">
     <span>这是div中的第一个span标签</span>
     <p>这是div中的第二个元素,第一个p标签</p>
     <ul id="uu">
         <li>内容1</li>
         <li>内容2</li>
         <li id="three">内容3</li>
         <li>内容4</li>
     </ul>
   </div>
   
<script>
  var ulObj=document.getElementById("uu");
  //父级节点
  console.log(ulObj.parentNode);
  //父级元素
  console.log(ulObj.parentElement);
  //子节点
  console.log(ulObj.childNodes);
  //子元素
  console.log(ulObj.children);
  //第一个子节点
  console.log(ulObj.firstChild);//IE8中是第一个子元素
  //第一个子元素
  console.log(ulObj.firstElementChild);//IE8中不支持
  //最后一个子节点
  console.log(ulObj.lastChild);//IE8中是第一个子元素
  //最后一个子元素
  console.log(ulObj.lastElementChild);//IE8中不支持
  //某个元素的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个元素的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个元素的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个元素的后一个兄弟元素
  console.log(my$("three").nextElementSibling);

//  //第一个子节点
//  console.log(ulObj.firstChild.innerText);
//  //最后一个子节点
//  console.log(ulObj.lastChild.innerText);
//  //某个元素的前一个兄弟节点
//  console.log(my$("three").previousSibling.innerText);
//  //某个元素的后一个兄弟节点
//  console.log(my$("three").nextSibling.innerText);
</script>
</body>
</html>

总结:
凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持

喵_美

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
元素和节点的相关概念

概念文档：document元素（element）：页面中所有的标签，即使元素也是节点节点（node）：页面中所有的内容，包括标签、属性（标签的属性）、文本(文字,换行,空格,回车))根元素:html标签节点节点的属性:(可以使用标签–元素.（点）出来,可以使用属性节点.出来,文本节点.点出来)nodeType:节点的类型:1----标签,2—属性,3—文本nodeName:节...
复制链接

扫一扫