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 ...
随机推荐
- LODOP打印控件进行批量打印
Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...
- Python学习之路——Day02
今日内容: 1.编程语言介绍(***) 2.python介绍(***) 3.安装cpython解释器(多个版本)(****) 4.运行python程序的两种方式(****) 4.1 交互式 4.2 命 ...
- jQuery 操作Cookie
一个轻量级的cookie 插件,可以读取.写入.删除 cookie. 下载地址:http://plugins.jquery.com/cookie/ (在实际中可以用这个保存cookie保存用户的习惯, ...
- SQL Server 一张图让你秒懂联合表查询
- Nginx 针对建立TCP连接优化
L:124 sysctl -a | grep file-max //通过命令查看系统最大句柄数 [root@3 ~]# sysctl -a | grep file-max fs.file-max = ...
- Qt5 入门
main()函数中第一句是创建一个QApplication类的实例. 对于 Qt 程序来说,main()函数一般以创建 application 对象(GUI 程序是QApplication,非 GUI ...
- MySQL参数调优
目录 连接相关参数 文件相关参数 缓存相关参数 MyISAM参数 InnoDB参数 连接相关参数 max_connections 允许客户端并发连接的最大数量,默认值是151,一般将该参数设置为50 ...
- Python图形库Turtle
画笔绘制状态函数 函数 描述 pendown() 放下画笔 penup() 提起画笔,与pendown()配合使用 pensize(width) 设置画笔线条的粗细为指定大小 画笔运动函数 函数 描述 ...
- linux系统版本大全
Linux系统下载地址:http://www.jb51.net/LINUXjishu/239493.html linux系统教学视频:http://www.uplinux.com/shipin/lin ...
- BZOJ3224普通平衡树——旋转treap
题目: 此为平衡树系列第一道:普通平衡树您需要写一种数据结构,来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. 查询x数的排名(若有多个相同的数, ...