【JavaScript】DOM的其他查询

简介: 【JavaScript】DOM的其他查询

获取body标签


获取body标签有两种方法,以下两种方法都等效。


document.body


window.onload = function(){
    //1.查询body标签
    var body = document.body;
    console.log(body);
}


document.getElementsByTagName(‘body’)[0]


window.onload = function(){
    //1.查询body标签
    var body2 = document.getElementsByTagName('body')[0];
    console.log(body2);
}


获取html根标签


获取html标签同样有两种方法,以下两种方法都等效。


document.documentElement


window.onload = function(){
    //查询html根标签
    var html = document.documentElement;
    console.log(html);
}


document.getElementsByTagName(‘html’)[0]


window.onload = function(){
  //查询html根标签
    var html2 = document.getElementsByTagName('html')[0];
    console.log(html2);
}


获取所有元素


获取当前页面下的所有元素标签。


document.all


window.onload = function(){
    //获取所有元素
    var all = document.all;
    console.log(all);
}



根据元素的class属性值查询一组元素节点对象


注意:查询class属性标签时,查询结果是一个类数组对象


document.getElementsByClassName


window.onload = function(){
    //根据元素的class属性值查询一组元素节点对象
    var box = document.getElementsByClassName('box1');
    console.log(box.length);
}


获取页面中的div


document.querySelector


需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象

如果满足条件的元素有多个,那么它只会返回第一个


window.onload = function(){
    var div = document.querySelector('.box1 p');
    console.log(div);
}


document.querySelectorAll


查找满足条件的所有div。


window.onload = function(){
    var divall = document.querySelectorAll('.box1');
    console.log(divall);
}
目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
28天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
41 5
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
22天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
80 4
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
22 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
38 4
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
46 0
|
2月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
25 0