JS(基础)_总结获取页面中元素和节点的方式
一、前言
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(基础)_总结获取页面中元素和节点的方式的更多相关文章
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- javascript 获取父页面中元素对象方法
父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...
- 获取页面中任意一个元素距离body的偏移量
//offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...
- javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...
- js获取页面中图片的总数
查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...
- flash播放器遮挡页面中元素问题解决
今天在做一个包含Flash播放器的页面弹出效果时发现Flash播放器总是跑到页面最上层,发现这个问题与Flash的”wmode”属性有关,至于该元素详细此处不做记录,解决办法如下: IE:加入参数:& ...
- arcgis js之点击获取featureLayer中的点
arcgis js之点击获取featureLayer中的点 代码: this.view.on('click', (evt) => { let layer = this.map.findLayer ...
- 根据当前设备的宽度，动态计算出rem的换算比例，实现页面中元素的等比缩放
~function anonymous(window){ //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放 let computedREM = function compu ...
随机推荐
- Cisco IP 电话 将它的voice mail 发送到手机
功能一.将语音转成文字发送短信(有微软认知.百度认知.云片短信API) 功能二.直接将音频发送到微信 不废话,直接送个包 链接: https://github.com/JaviZhu/KLCN.Spe ...
- js 异步代码
这段时间一直在用node.js做毕设的后台,所以需要一些异步代码操作,主要的异步方式有:Promise.Generator 和 async / await,但下面主要讲 Promise 和 async ...
- Codeforces Round #483 Div. 1
A:首先将p和q约分.容易发现相当于要求存在k满足bk mod q=0,也即b包含q的所有质因子.当然不能直接分解质因数,考虑每次给q除掉gcd(b,q),若能将q除至1则说明合法.但这个辣鸡题卡常, ...
- P1403 [AHOI2005]约数研究
原题链接 https://www.luogu.org/problemnew/show/P1403 这个好难啊,求约数和一般的套路就是求1--n所有的约数再一一求和,求约数又要用for循环来判断.... ...
- BZOJ3277 串 【后缀数组】【二分答案】【主席树】
题目分析: 用"$"连接后缀数组,然后做一个主席树求区间内不同的数的个数.二分一个前缀长度再在主席树上求不同的数的个数. 代码: #include<bits/stdc++.h ...
- Codeforces1036G Sources and Sinks 【构造】【状态压缩】
题目分析: 考虑一个源点集合$S$,如果$S$能到的点$T$比$S$小,那么$T$全连到$S$里面,其它点就到不了$T$啦.否则我们全连完后$S$集合被迫扩大,所以总能扩大满. 代码: #includ ...
- Docker基本使用（二）
Docker 客户端 我们可以直接输入 docker 命令来查看到 Docker 客户端的所有命令选项. 可以通过命令 docker command --help 更深入的了解指定的 Docker 命 ...
- 微信小程序避坑指南
如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2 ...
- android 异常信息The specified child already has a parent. You must call removeView() on the child's parent first. 的处理方法
[Android异常信息]: The specified child already has a parent. You must call removeView() on the child's p ...
- 【Linux命令】linux一次性解压多个.gz或者.tar.gz文件
原文:linux一次性解压多个.gz或者.tar.gz文件 解压多个压缩包 对于解压多个.gz文件的,用此命令: for gz in *.gz; do gunzip $gz; done 对于解压多个. ...