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查询的更多相关文章

  1. JavaScript中DOM查询封装函数

    在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...

  2. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  3. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  4. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  5. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  6. Javascript的DOM总结

    Javascript的DOM总结 DOM DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的 ...

  7. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  8. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  9. 深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...

随机推荐

  1. 一键完成SAP部署的秘密,想知道么?

    诸如 SAP 这样的企业级应用已成为普遍的流行趋势.考虑到不同行业和需求的特点,所选平台必须能够为不同层面用户和各种 IT 活动提供灵活的容量需求. 此时上云也许是种不错的选择,而想上云的企业,一方面 ...

  2. Azure 11 月新公布

    Azure 11 月新发布:Apple FairPlay Streaming, 应用服务(App Service), 虚拟机规模集(VMSS) Azure 媒体服务的 Apple FairPlay S ...

  3. 【Leetcode】【Easy】Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  4. 创建Spark镜像文件

    创建Spark镜像文件 1.将spark容器提交到新的镜像中 $>docker commit 01a25bdf1499 myrepos:centos-spark 2.将centos-spark镜 ...

  5. 卡方分布、卡方独立性检验和拟合性检验理论及其python实现

    如果你在寻找卡方分布是什么?如何实现卡方检验?那么请看这篇博客,将以通俗易懂的语言,全面的阐述卡方.卡方检验及其python实现. 1. 卡方分布 1.1 简介 抽样分布有三大应用:T分布.卡方分布和 ...

  6. poj2253 Frogger dijkstra

    题目大意: 给出n个岛的坐标,前两个坐标分别为A青蛙和B青蛙所在岛的坐标,A青蛙想到达B青蛙所在的岛,A可以从某一个岛跳到任意其它一个岛上,则A到B的每条路径都有一个跳的最远的距离Xi,求这些最远距离 ...

  7. 改写python round()函数,解决四舍五入问题 round(1.365,2)=1.36

    round()函数四舍五入存在一个问题,遇到5不一定进一.如下图所示: print(round(1.365,2)) #1.36 没进一 print('%.2f'%1.365) print(round( ...

  8. python入门15 函数

    函数的主要作用是实现代码复用 1 python内置函数 2 匿名函数lambda 3 自定义函数 def functionname(arg):... #coding:utf-8 #/usr/bin/p ...

  9. JavaScript内存管理

    低级语言,比如C,有低级的内存管理基元,想malloc(),free().另一方面,JavaScript的内存基元在变量(对象,字符串等等)创建时分配,然后在他们不再被使用时"自动" ...

  10. maven学习记录四——私服 nexus

    8       私服 nexus 安装nexus 启动服务 启动失败的解决方法: 登录nexus 用户名/密码  admin/admin123 仓库类型 Virtual   虚拟仓库 Proxy  代 ...