一、前言

1、元素和节点的区别

2、总结获取元素的方式

3、总结获取节点的方式

二、主要内容

1、结点和元素的区别

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

　　　　文档：document

　　　　元素：页面中所有的标签

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

　　　　根元素：html标签

　（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(基础)_总结获取页面中元素和节点的方式的更多相关文章

  1. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  2. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

  4. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  5. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  6. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  7. flash播放器遮挡页面中元素问题解决

    今天在做一个包含Flash播放器的页面弹出效果时发现Flash播放器总是跑到页面最上层,发现这个问题与Flash的”wmode”属性有关,至于该元素详细此处不做记录,解决办法如下: IE:加入参数:& ...

  8. arcgis js之点击获取featureLayer中的点

    arcgis js之点击获取featureLayer中的点 代码: this.view.on('click', (evt) => { let layer = this.map.findLayer ...

  9. 根据当前设备的宽度，动态计算出rem的换算比例，实现页面中元素的等比缩放

    ~function anonymous(window){ //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放 let computedREM = function compu ...

随机推荐

  1. 三、Docker网络

    一.查看8001端口是否开启处监听状态 netstat -apnl | grep 8001 二.使用brctl show可以看到虚拟机的网络关系 brctl show docker每新建一个conta ...

  2. 各个版本spring的jar包以及源码下载地址，目前最高版本到spring4.3.8，留存备用：

    http://maven.springframework.org/release/org/springframework/spring/

  3. LODOP设置判断后执行哪个

    LODOP的语句是普通的语句,可以通过JS判断确定要执行哪个,或通过循环循环执行一些语句.如果需要执行某些打印项在哪些条件下不打印,不需要通过代码删除打印项,类似LODOP.SET_PRINT_STY ...

  4. group by具有去重的功能

    group by具有去重的功能

  5. MySQL数据库安装配置

    1,下载MySQL 打开MySQL的官网www.mysql.com,发现有一个DOWNLOADS 点击它,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, ...

  6. hdu-3746(kmp）

    题意:给你一个字符串,问你至少增添几个字符可以把这个字符串变成一个循环字符串(ababa的循环节是ab,不是aba): 解题思路:利用kmp中的next数组,首先在这样求next的数组的代码里: vo ...

  7. Nginx 如何限制响应速度

    在 location 里设置 location { set $limit_rate 1k; 表示每秒只响应1k的速度 }

  8. Chessboard POJ - 2446（最大流 || 匹配）

    there is a pair of integers (x, y) in each line, which represents a hole in the y-th row, the x-th c ...

  9. ecplise properties文件 中文转码

    1.安装插件 2.重开ecplise 3.在项目的乱码文件如jeesite.properties右键 openwith propertiesEditor 就可以看到中文了 输入 proedit 安装完 ...

  10. IP地址等价类测试用例

    下面是一个比较完善的设计方案,这个方案中,首先把IP地址分成有效可用的IP地址和有效但不可用的IP地址两个等价类:其中有效可用的IP地址中包括IP地址的A,B,C三类地址,有效但不可用的IP地址包括D ...