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 ...
随机推荐
- Python——Entry、Text控件
background(bg) : 文本框背景色: foreground(fg) : 前景色: selectbackground : 选定文本背景色: selectforegroun ...
- Lodop打印html数字间隔不一致
在font-size属性控制数字大小的时候,可能会出现数字间隔有问题,间隔不一致,可尝试用其他字体大小试试,一般字体越小,越可能出现问题. 如图,前两个打印项都是form1,样式一个是style1,一 ...
- React 学习(七) ---- create-react-app
现在react 基础知识已经算是学完了,知道了React是做什么的,以及怎么使用,是时候学习一个webpack, babel 等现代化前端开发了,真正做项目的时候,我们不可能再使用babel 的线上编 ...
- luogu T40984Chino的成绩
Chino的成绩 题目描述 Chino非常注重自己的成绩 Chino有m种方式给自己增加rp以增加成绩,她的每种增加rp的方式都有n个阶段,第i种的第j个阶段增加的rp表示为Aij,表示连续进行了j ...
- python----re正则模块详解
今天介绍一下Python中常用的正则表达式处理函数.Python的正则表达式主要有两种方法完成模式匹配:『搜索』和『匹配』 re.match re.match 尝试从字符串的开始全部或者部分匹配某个模 ...
- NoClassDefFoundError与ClassNotFoundException
原文地址: https://blog.csdn.net/jamesjxin/article/details/46606307 怎么解决NoClassDefFoundError错误 NoClassDef ...
- JVM是如何处理异常的
JVM处理异常 异常处理的两大组成要素是抛出异常和捕获异常.这两大要素共同实现程序控制流的非正常转移. 抛出异常可分为显式和隐式两种.显式抛异常的主体是应用程序,指的是在程序中使用throw关键字,手 ...
- fpm 打包教程
常用yum命令: Yum安装时需要安装到指定的文件夹,则需要 --installroot yum install --installroot=/usr/src/ vim 常用rpm命令: 常用yum仓 ...
- webpack——阮一峰webpackDemo分析
首先上交阮一峰老师的github地址,一共有15个demo,我们一个一个的进行分析,结合上文所学的知识! 其中有一些内容,我做了修改,我是先看一遍然后从新敲了一遍. https://github.co ...
- 怎么用Verilog语言描述同步FIFO和异步FIFO
感谢 知乎龚大佬 打杂大佬 网上几个nice的博客(忘了是哪个了....) 前言 虽然FIFO都有IP可以使用,但理解原理还是自己写一个来得透彻. 什么是FIFO? Fist in first out ...