一、前言

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. Asp.Net Core 输出 Word

    In one of the ASP.NET Core projects we did in the last year, we created an OutputFormatter to provid ...

  2. .resx文件与.cs文件的自动匹配

    图中myCommands.Resx是<DependentUpon> myCommands.cs文件的. 如何为其他的.cs文件添加类似的资源文件呢? 其实挺简单, 添加与.cs文件同名的资 ...

  3. Vmware 控制脚本

    #_*_ coding:utf8 _*_ import sys,time import yaml import re import os import ssl import random import ...

  4. POJ 3020 -Antenna Placement-二分图匹配

    题意:一个N*M的矩阵里有K个观测点,你必须放置天线覆盖所有观测点.每个雷达只能天线两个观测点,这两点必须相邻.计算最少天线数. 做法:将所有相邻的观测点连起来,建图.跑一遍匈牙利算法就计算出了最大的 ...

  5. HDU4624 Endless Spin 【最大最小反演】【期望DP】

    题目分析: 题目是求$E(MAX_{i=1}^n(ai))$, 它等于$E(\sum_{s \subset S}{(-1)^{|s|-1}*min(s))} = \sum_{s \subset S}{ ...

  6. 洛谷P1582 倒水题解

    题目 分析 这个题并不难,只是需要仔细思考我们首先可以很轻松的把这个题给疏通一下题意. 1:首先我们最后每个瓶子中装的水一定是一个$2^x$,因为每次都是$2$倍的加,这个应该很好理解. 2:我们要明 ...

  7. MT【253】仿射和蒙日圆

    如图,设点$M(x_0,y_0)$是椭圆$C:\dfrac{x^2}{2}+y^2=1$上一点,从原点$O$向圆$M:(x-x_0)^2+(y-y_0)^2=\dfrac{2}{3}$作两条切线分别与 ...

  8. 【比赛】NOIP2018 货币系统

    可以发现最后的集合一定是给定集合的子集 所以就变成了裸的背包嘛,对于每个数判断它能不能被其它数表示出来,如果可以,就表示这个数是没用的,可以去掉 #include<bits/stdc++.h&g ...

  9. 信用算力基于 RocketMQ 实现金融级数据服务的实践

    微服务架构已成为了互联网的热门话题之一,而这也是互联网技术发展的必然阶段.然而,微服务概念的提出者 Martin Fowler 却强调:分布式调用的第一原则就是不要分布式. 纵观微服务实施过程中的弊端 ...

  10. HttpWebRequest发http参数

    使用js发请求时,一般使用表单.json对象或者字符串 $.post(url,jsonStr) 服务端获取参数 Request.QueryString.Get();// GET参数 Request.F ...