JS(基础)_总结获取页面中元素和节点的方式

一、前言

1、元素和结点的区别

2、总结获取元素的方式

3、总结获取节点的方式

二、主要内容

1、结点和元素的区别

（1）一些常见基本概念：

　　　　文档：document

　　　　元素：页面中所有的标签

　　　　结点：页面中所有的内容包括（标签，属性，文本（文字，空格，换行，回车））

　　　　根元素：html标签

扫描二维码关注公众号，回复： 5656897 查看本文章

　（2）节点属性

　　　　nodeType:表示节的类型： 1-------表示是标签， 2-------属性， 3-------文本

nodeName:节点的名字：标签------大写的标签名字，属性-----小写的属性名，文本-----#text

　　　　nodeValue: 节点的值：标签节点----null, 属性节点-----属性值，文本节点------文本内容

　（3）获取节点和元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>
    <li>5</li>
  </ul>
</div>
<script type="text/javascript">
    var ulObj=document.getElementById("uu");
    var liObj=document.getElementById("three");
    //父级节点====><div id='dv'>
    console.log(ulObj.parentNode)
    //父级元素====><div id='dv'>
    console.log(ulObj.parentElement)
    //子节点====》NodeList(11) [text, li, text, li, text, li#three, text, li, text, li, text]
    console.log(ulObj.childNodes)
    //子元素===>HTMLCollection(5) [li, li, li#three, li, li, three: li#three]
    console.log(ulObj.children)


    //第一个子节点====>#text----------------------------在IE8中是第一个子元素<li>1</li>
    console.log(ulObj.firstChild)
    //第一个子元素====>li-------------------------------IE8中不支持
    console.log(ulObj.firstElementChild)
    //最后一个子节点==>
    console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
    //最后一个子元素
    console.log(ulObj.lastElementChild);//-----------------IE8中不支持
    //获取某个元素前一个兄弟节点
    console.log(liObj.previousSibling)
    //获取前一个兄弟元素
    console.log(liObj.previousElementSibling)
     //某个元素的后一个兄弟节点
    console.log(my$("three").nextSibling);
     //某个元素的后一个兄弟元素
    console.log(my$("three").nextElementSibling);
</script>
</body>
</html>

（4）获取元素

/*
  *
  * （1）根据id属性的值获取元素,返回来的是一个元素对象
  * document.getElementById("id属性的值");
  *
  * （2）根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
  * document.getElementsByTagName("标签名字");
  *
  * 下面的几个,有的浏览器不支持
  *
  *（3） 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
  * document.getElementsByName("name属性的值")

  *（4）根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
  * document.getElementsByClassName("类样式的名字")

  *（5）根据选择器获取元素,返回来的是一个元素对象-------------IE8以下不支持
  * document.querySelector("选择器的名字");
  *
  *（6）根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
  * document.querySelectorAll("选择器的名字")
  *
  *
  * */

（5）获取第一个元素和最后一个的兼容性写法

  function getFirstElementChild(element) {
    if(element.firstElementChild){//支持
      return element.firstElementChild;
    }else{
      var node=element.firstChild;//获取第一个节点，万一ie中为第一个元素
      while (node&&node.nodeType!=1){//火狐和谷歌中获取到第一个节点是标签，就取他的兄弟节点
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }

三、总结

JS(基础)_总结获取页面中元素和节点的方式

猜你喜欢