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>
JavaScript之DOM查询的更多相关文章
- JavaScript中DOM查询封装函数
在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Javascript的DOM总结
Javascript的DOM总结 DOM DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- 深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...
随机推荐
- asyncio标准库6 Threads & Subprocess
Threads import asyncio def compute_pi(digits): # implementation return 3.14 async def main(loop): di ...
- Java中条件语句和if-else的嵌套原则
if(condition)Statement 在此时的条件语句中的条件是需要用括号把它括起来. 其实,Java中的条件语句和C/C++中的是一样的.而Java常常希望在某个条件为真的时候执行多条语 ...
- Markdown 使用方法总结
标题: [#] 表示一级标题 [##] 表示二级标题 [###]表示三级标题 引用块:在引用文本前插入 Tab,具体几个 Tab 根据文本所处的位置不同而不同 列表:[ - ]即一个空格加上一个中划 ...
- apache-实战(二)
Apache 虚拟主机 --用apache或nginx就可以做 一台服务器跑多台web服务 VPS virtual private server 虚拟专用服务器 --使用虚拟化技术来做 云服务器 虚拟 ...
- Jerry的WebClient UI 42篇原创文章合集
我要感谢CRM On Premise, 因为在这个产品上做开发让我得以使用WebClient UI框架.有些朋友觉得这个SAP自己发明的基于HTML+ABAP的MVC框架,和现在流行的三驾马车(Ang ...
- 最新DNS汇集
最近几日DNS大规模抽风,网络环境是一天比一天恶劣,于是收集了一些良心的DNS服务器地址,以备不时之需. 国内服务器: 1.OpenerDNS:42.120.21.30 2.114DNS:114.11 ...
- Android(java)学习笔记40:WindowManager 中LayoutParams的各种属性
1. WindowManager 中LayoutParams的各种属性 WindowManager.LayoutParams 是 WindowManager 接口的嵌套类(内部类):它继承于 View ...
- Uva 11419 我是SAM
题目链接:https://vjudge.net/problem/UVA-11419 题意:一个网格里面有一些目标,可以从某一行,某一列发射一发子弹,可以打穿: 求最少的子弹,和在哪里打? 分析: 听说 ...
- POJ 1986 Distance Queries 【输入YY && LCA(Tarjan离线)】
任意门:http://poj.org/problem?id=1986 Distance Queries Time Limit: 2000MS Memory Limit: 30000K Total ...
- HDU 5025 Saving Tang Monk 【状态压缩BFS】
任意门:http://acm.hdu.edu.cn/showproblem.php?pid=5025 Saving Tang Monk Time Limit: 2000/1000 MS (Java/O ...