一、前言

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. fastjson与各类型的转换

    参考:https://www.cnblogs.com/ceshi2016/p/7381478.html http://www.cnblogs.com/goody9807/p/4244862.html ...

  2. Unable to resolve target 'android-15'

    SDK 15没有加载造成的,在SDK Manager.exe下安装以下文件 Android SDK Tools (25.2.5) Android SDK Platform-tools (28.0.1) ...

  3. SQL Server 一张图让你秒懂联合表查询

  4. Mybatis常见问题总结

    1.大于号.小于号在sql语句中的转换 使用mybatis 时sql语句是写在xml文件中,如果sql中有一些特殊的字符的话,比如< ,<=,>,>=等符号,会引起xml格式的 ...

  5. 关于mysql 5.7 版本登录时出现错误 1045的随笔

    之前学习的时候用的都是oracle 但是现在在工作中大部分用的都是mysql,所以自己也就装了个mysql,下载.安装教程都是从网上百度的,花了挺长时间才装好,心也是挺累的,教程挺多,就是不知道该用哪 ...

  6. P1035 调和级数

    两种解法如下: 1.模拟 这种做法的思路是枚举n从1开始,直到Sn>k结束,只需要一个循环即可实现. 代码: #include<cstdio> int main() { ; scan ...

  7. Matplotlib学习---用matplotlib画饼图/面包圈图（pie chart, donut chart）

    我在网上随便找了一组数据,用它来学习画图.大家可以直接把下面的数据复制到excel里,然后用pandas的read_excel命令读取.或者直接在脚本里创建该数据. 饼图: ax.pie(x,labe ...

  8. robotframework用例标签的使用

    *** Settings ***Force Tags req-42Default Tags owner-john smoke *** Variables ***${HOST} 10.0.1.42 ** ...

  9. 【BZOJ1578】【USACO2009Feb】股票市场 背包DP

    题目大意 告诉你\(n\)只股票在这\(m\)天内的价格,给你\(s\)元的初始资金,问你\(m\)天后你最多拥有多少钱. \(n\leq 50,m\leq 10,s\leq 200000,\)答案\ ...

  10. MT【284】构造函数的导数的两类题型

    第一类: 已知定义在$R$上的奇函数$f(x),f(-1)=0,$当$x>0$时,$xf^{'}(x)-f(x)<0,$则$f(x)>0$的解集为____ 第二类: 已知函数$f(x ...