一、前言

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. EChart.js 笔记一

    一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...

  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. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  4. codeforces263B

    Squares CodeForces - 263B Vasya has found a piece of paper with a coordinate system written on it. T ...

  5. BZOJ2428[HAOI2006]均分数据——模拟退火

    题目描述 已知N个正整数:A1.A2.…….An .今要将它们分成M组,使得各组数据的数值和最平均,即各组的均方差最小.均方差公式如下: ,其中σ为均方差,是各组数据和的平均值,xi为第i组数据的数值 ...

  6. BZOJ5475 WC2019数树（prufer+容斥原理+树形dp+多项式exp）

    因为一大堆式子实在懒得写题解了.首先用prufer推出CF917D用到的结论,然后具体见前言不搭后语的注释. #include<iostream> #include<cstdio&g ...

  7. 大学java教案之MySQL安装图解

    一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行"setup.exe". 2.选择安装类型,有"Typ ...

  8. SpringBoot整合ssm

    1.创建工程 使用idea可以快速创建SpringBoot的工程 这里选择常用的类库,SpringBoot将各种框架类库都进行了封装,可以减少pom文件中的引用配置: 比如Spring和Mybatis ...

  9. 微信小程序避坑指南

    如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2 ...

  10. Configure an PPTP Server on Debian

    安装PPTP apt-get update apt-get upgrade apt-get install iptables pptpd vim 设置并修改配置文件vim /etc/pptpd.con ...