JavaScript中的DOM查询方法(全) |
您所在的位置：网站首页 › 汽车配件目录查询方法有哪些类型 › JavaScript中的DOM查询方法(全) |
JavaScript中的DOM查询方法(全)
|
学习JavaScript中的DOM(文本对象模型)就是主要学习它的查询，查询是DOM的核心所在，而它围绕着一个单词—document 一、理解DOM当HTML加载到内存中时，会形成一个树形结构，包括了四种类型的节点：(如下图) 文档节点==>document 元素节点==>标签 属性节点==>标签的属性 文本节点==>标签体
可以看到处于最上层的文档节点(document)可以访问下面的所有节点来获取对象进而操作对象。 二、 DOM的查询方法 document.getElementById(“id值”) 通过id属性获取一个元素节点对象document.getElementsByName(“name属性值”) 通过name属性获取一组元素节点对象document.getElementsByTagName(“标签名”) 可以根据标签名来获取一组元素节点对象document.getElementByClassName(“class属性值”) 返回多个对象obj.getElementsByTagName(); 获取元素下的一组节点obj.childNodes会获取包括文本节点在内的所有节点obj.children可以获取当前元素的所有子元素，不包括空白文档了obj.firstChild 第一个子节点(包括空白的文本节点)obj.firstElementChild 获取当前元素的第一个子元素obj.parentNode获取当前元素的父元素obj.previousSibling返回前一个兄弟节点 也有可能获取到空白的文本obj. previousElementSibling返回前一个兄弟元素，不包括空白文本 注意：不支持ie8及以下的浏览器 document.body获取body标签document.documentElement;获得html根元素document.all页面中的所有的元素document.getElementsByTagName("*")页面中的所有的元素document.querySelector()1、需要一个选择器的字符串作为参数，可以根据一个css选择器 来查询一个元素节点对象 2、该方法总会返回唯一的元素，如果满足条件的元素是多个， 那么它只会返回第一个 3、IE8以上的都适用 document.querySelectorAll()1、该方法和qureySelector()用法类似， 不同的是它将会将符合条件的元素封装到一个数组中返回 2、即使符合条件的元素只有一个，它也会返回数组
三、dom查询练习
Untitled Document
你喜欢哪个电影? 北京，我爱你 爱上西雅图 叶问3 前任3你喜欢哪款游戏? 王者荣耀 消消乐 极品飞车 魔兽你手机的操作系统是? IOS Android Windows Phone gender: Male Female name: 需求如下： 查找#bj节点 查找所有li节点 查找name=gender的所有节点 获取class名为inner的节点 查找#city下所有li节点 返回#city的所有子节点 返回#phone的第一个子节点 返回#bj的父节点 返回#android的前一个兄弟节点 返回#username的value属性值 设置#username的value属性值 返回#bj的文本值 |
【本文地址】
今日新闻 |
推荐新闻 |