一、前言

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. MySQL函数GROUP_CONCAT

    该函数返回带有来自一个组的连接的非NULL值的字符串结果.该函数是一个增强的Sybase SQL Anywhere支持的基本LIST()函数. 语法结构: GROUP_CONCAT([DISTINCT ...

  2. 对mysql 单表备份

    #!bin/bash cd C:\Program Files\MySQL\MySQL Server 5.5\bin set "Ymd=%date:~,4%%date:~5,2%%date:~ ...

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

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

  4. iPhone

    电报交流***vpnpay app不能用了,只要能下载就可以用,谨慎卸载 升级.网络链接不成功的,多试几次,毕竟程序不会运行你的错误操作 ,重新添加链接服务器,继续搞!耐心的进行下面操作即可链接,如有 ...

  5. Qt QTimer

    QTimer类提供了重复和单次触发信号的定时器. QTimer类为定时器提供了一个高级别的编程接口.很容易使用:首先,创建一个QTimer,连接timeout()信号到适当的槽函数,并调用start( ...

  6. HDU4292-Food-网络流

    裸网络流题. #include <cstdio> #include <algorithm> #include <cstring> #include <queu ...

  7. HDU1251 字典树板子题

    题意:中文题,统计以某字符串作为前缀的字符串个数 刚学字典树,理解起来十分简单,就是维护一个多叉树,这里用的是链表版本,后面就用的是数组版本了,个人更喜欢数组版本,这里的链表版本就因为 莫名其妙的错误 ...

  8. Task Schedule HDU - 3572（按时间点建边）

    问题描述 我们的几何公主XMM已经开始研究计算几何学,专注于她新开的工厂.她的工厂引进了M台新机器来处理即将到来的N个任务.对于第i个任务,工厂必须在第Si天或之后开始处理它,处理Pi天,并在Ei之前 ...

  9. bzoj 1257: [CQOI2007]余数之和 (数学+分块）

    Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值 其中k mod i表示k除以i的余数. 例如j(5 ...

  10. Mac 部分软件介绍

    1.Pickle可帮你轻松的安装 PHP 扩展,支持所有平台.基于 Composer(PHP的依赖管理器)开发.-----------扩展安装 2.composer parallel install ...