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内联样式
103 0
|
JavaScript 前端开发
【JavaScript】DOM的其他查询
【JavaScript】DOM的其他查询
77 0
|
JavaScript 前端开发
【JavaScript】DOM查询(子节点、父节点、兄弟节点)源码详解
【JavaScript】DOM查询(子节点、父节点、兄弟节点)源码详解
199 0
|
JavaScript 前端开发
【JavaScript】DOM查询之全选练习
【JavaScript】DOM查询之全选练习
95 0
|
JavaScript 前端开发
【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)
【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)
119 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查询之全选练习
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。