JavaScript之DOM查询
DOM查询
- 通过具体的元素节点来查询
- 元素.getElementsByTagName()
- 通过标签名查询当前元素的指定后代元素,返回数组
- 元素.childNodes
- 获取当前元素的所有子节点
- 会获取到空白的文本子节点
- 元素.children
- 获取当前元素的所有子元素
- 元素.firstChild
- 获取当前元素的第一个子节点
- 元素.lastChild
- 获取当前元素的最后一个子节点
- 元素.parentNode
- 获取当前元素的父元素
- 元素.previousSibling
- 获取当前元素的前一个兄弟节点
- 元素.nextSibling
- 获取当前元素的后一个兄弟节点
innerHTML和innerText
- 这两个属性并没有在DOM标准定义,但是大部分浏览器都支持这两个属性
- 两个属性作用类似,都可以获取到标签内部的内容,
不同是innerHTML会获取到html标签,而innerText会自动去除标签
- 如果使用这两个属性来设置标签内部的内容时,没有任何区别的
读取标签内部的文本内容
<h1>h1中的文本内容</h1>
元素.firstChild.nodeValue
- document对象的其他的属性和方法
document.all
- 获取页面中的所有元素,相当于document.getElementsByTagName("*");
document.documentElement
- 获取页面中html根元素
document.body
- 获取页面中的body元素
<script>
//var body = document.getElementsByTagName("body")[0];
var body = document.body;//body标签
var html = document.documentElement;//html跟标签
var all = document.all;//所有标签
all = document.getElementsByTagName("*");//与all一样的 console.log(all.length);
for(var i=0; i<all.length; i++){
console.log(all[i]);
}
var box1 = document.getElementsByClassName("box1");//支持IE9以上
console.log(box1.length);
</script>
document.getElementsByClassName()
- 根据元素的class属性值查询一组元素节点对象
- 这个方法不支持IE8及以下的浏览器
<script>
var box1 = document.getElementsByClassName("box1");//支持IE9以上
console.log(box1.length);
</script>
document.querySelector()
- 根据CSS选择器去页面中查询一个元素
- 如果匹配到的元素有多个,则它会返回查询到的第一个元素
<script>
//querySelector(".box1 div")
//需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
//IE8以上可用,可以用来代替getElementsByClassName()方法
//总会返回唯一一个,如果有多个,只返回第一个
var div = document.querySelector(".box1 div");
console.log(div.innerText);
</script>
document.querySelectorAll()
- 根据CSS选择器去页面中查询一组元素
- 会将匹配到所有元素封装到一个数组中返回,即使只匹配到一个
<script>
//返回数组
var divs = document.querySelectorAll(".box1 div");
console.log(divs.length);
</script>
最新文章
- 批量解密SQLSERVER数据库中的各种对象的工具dbForge SQL Decryptor
- 初学C#和MVC的一些心得,弯路,总结,还有教训(1)--语言的选择
- StringByAppendingPathComponent和stringByAppendingString的区别
- 使用PHP发送邮件的两种方法
- 解决android sdk manage打开闪退的解决方法
- 为MYPoint类写一个分类
- 用EPPlus导入导出数据到excel
- Lua与C/C++交互问题
- listview,fragment结合起来
- 【一天一道LeetCode】#10. Regular Expression Matching
- 【Docker笔记】-开启TCP管理端口
- restore not found的错误(问题2)
- centos install redmine (项目管理工具)
- h.264 x.264
- 代码记录——phase16,block32
- 炸弹人NABCD分析
- jquery源码解析:jQuery数据缓存机制详解1
- Java基础——NIO(一)通道与缓冲区
- Hibernate传递list参数的例子
- 【转】jQuery的deferred对象详解
热门文章
- 在 Windows Vista、Windows 7 和 Windows Server 2008 上设置 SharePoint 2010 开发环境
- Azure 10月新公布
- JavaScript模块化编程之AMD - requireJS基础使用
- Centos7安装完毕后无法联网的解决方法(转)
- luogu P1121 环状最大两段子段和
- POJ 3185 The Water Bowls 【一维开关问题 高斯消元】
- maven学习记录一——maven介绍及入门
- 三角测量(Triangulation)
- java 注解annotation的使用,以及反射如何获取注解
- Linux 和类 Unix 系统上5个最佳开源备份工具