美文网首页编程语言爱好者
JavaScript之dom查询方法

JavaScript之dom查询方法

作者: hi武林高手 | 来源:发表于2018-08-01 17:09 被阅读8次

获取body标签
在document中有一个属性body,它保存的是body的引用
var body = document.getElementsByTagName("body")[0];
var body = document.body;
document.documentElement保存的是html根标签
document.all可以获取页面中所有的元素
document.getElementsByTagName("*"); 这个与上面的方法一样,不过上面的比较简洁
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象,但是该方法不支持IE8及以下的浏览器
获取页面中的所有的div
var divs = document.getElementsByTagName("div");

获取class为box1中的所有的div
var div = document.querySelector(".box1 div");

document.querySelector();
var div = document.querySelector(".box1 div");

需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象, 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个

document.querySelectorAll()
该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回, 即使符合条件的元素只有一个,它也会返回数组

相关文章

  • JavaScript之dom查询方法

    获取body标签在document中有一个属性body,它保存的是body的引用var body = docume...

  • DOM(一):Node属性与方法

    DOM之Node属性与方法思维导图 JavaScript-DOM之Node方法 Node.nodeType No...

  • Vue之虚拟DOM

    Vue之虚拟DOM 为什么要用到虚拟DOM? 众所周知,DOM操作是JavaScript语言的硬伤。浏览器对DOM...

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • JavaScript入门学习书籍到阶段书籍

    入门:《深入浅出JavaScript》《JavaScript DOM编程艺术》 《JavaScript DOM高级...

  • JavaScript之DOM

    什么是DOM? DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档;O(对象)可以理解为类似 ...

  • javascript之DOM

    DOM文档对象模型 DOM文档对象模型是基于HTML树的api,这里可以把HTML结构看成是一颗树形结构,使用DO...

  • JavaScript 闯关记

    《JavaScript 闯关记》之 DOM(下) Element 类型 除了 Document 类型之外,Elem...

  • JavaScript HTML DOM

    JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有...

  • 专辑篇:JS HTML DOM

    JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...

网友评论

    本文标题:JavaScript之dom查询方法

    本文链接:https://www.haomeiwen.com/subject/lhsrvftx.html