DOM查询

简介: DOM查询

获取元素节点

通过document对象调用

  • getElementById() 通过Id属性获取一个元素节点对象
  • getElementsByTagName() 通过标签名获取
  • getElementsByName() 通过Name属性获取

获取元素节点的子节点

通过元素节点调用

  • getElementsByTagName() 通过标签名获取
    例如:
var city = docunment.getElementById("city");
# 查找city下所有的li节点
var lis = city.getElementsByTagName("li");
  • 属性:childNodes 当前节点的所有子节点,这里的childNodes会将换行等空白也当做节点。调用属性的时候是不用加括号的。
  • 属性:children 获取当前元素的所有子元素,这个属性只包括子元素而不包括文本节点。
  • 属性:firstChild 获取当前节点的第一个子节点
  • 属性:firstElementChild 获取当前元素的第一个子元素
  • 属性:lastChild 获取当前节点的最后一个节点

获取父节点和兄弟节点

通过具体的节点调用

  • 属性:parentNode (当前节点的父节点,一般父节点不会是文本,会是元素)
  • 属性:previousSibling (获取当前节点的前一个兄弟节点)
  • 属性:nextSibling(获取当前节点的后一个兄弟节点)
  • 属性:previousElementSibling(获取当前元素的前一个兄弟元素,不包含空白文本

获取body标签

var body = document.body;

获取Html标签

var html = document.documentElement;

获取页面中的所有元素

# 方式1
var all = document.all;
# 方式2
var all = document.getElementsByTagName("*");

获取类对象

var cls = document.getElementsByClassName("box1");

按照CSS元素选择器的方式查找元素节点

# 获取类名为box1下的div,下面的方法如果满足条件的有多个,只会返回第一个
var div = document.querySelector(".box1 div");
# 返回所有的情况
var divs = document.querySelectorAll(".box1");


相关文章
|
JavaScript
DOM ------ input框查询的放大效果
DOM ------ input框查询的放大效果
|
前端开发 JavaScript
【JavaScript】使用DOM修改和查询CSS内联样式
【JavaScript】使用DOM修改和查询CSS内联样式
92 0
|
JavaScript 前端开发
【JavaScript】DOM的其他查询
【JavaScript】DOM的其他查询
70 0
|
JavaScript 前端开发
【JavaScript】DOM查询(子节点、父节点、兄弟节点)源码详解
【JavaScript】DOM查询(子节点、父节点、兄弟节点)源码详解
182 0
|
JavaScript 前端开发
【JavaScript】DOM查询之全选练习
【JavaScript】DOM查询之全选练习
83 0
|
JavaScript 前端开发
【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)
【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)
104 0
|
前端开发 JavaScript
【JavaScript】DOM的其他查询
文章目录 获取body标签 document.body document.getElementsByTagName('body')[0] 获取html根标签 document.documentElement document.getElementsByTagName('html')[0] 获取所有元素 document.all 根据元素的class属性值查询一组元素节点对象 document.getElementsByClassName 获取页面中的div document.querySelector document.querySelectorAll
【JavaScript】DOM的其他查询
|
JavaScript 前端开发
【JavaScript】DOM查询之全选练习
通过上期【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)再接一个全选小练习。
【JavaScript】DOM查询之全选练习
|
8天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树