掌握JS中重点知识:DOM元素和对象模型
什么是DOM:文档对象模型(Doucment Object Model)是W3C组织推荐处理可扩展标记语言(HTML和XML)的标准编程接口;
- 文档:一个页面就是文档,DOM使用document表示
- 元素:页面中所有标签都是元素,DOM中使用element表示
- 节点:页面中所有内容都是节点(标签、属性、文本、注释等),用node表示
DOM把以上内容看作是对象。
文档对象模型(Document Object Model):
将网页转为JS对象,可以通过JS进行操作,浏览器根据DOM模型把文档解析为节点(Node),节
点组成节点树(DOM Tree)DOM的最小单位是节点;
注意:
- 因为我们的文档是从上往下执行加载,所以现有标签,我们script写到标签下
- get获得element元素by通过驼峰命名法
- 多参数id是大小写敏感的字符串
- 返回的是一个元素对象
节点的分类 :
Document |
文档节点 |
DocumentType |
文档类型节点 |
Element |
元素 标签 |
Attr |
属性 |
Text |
文本 |
Comment |
注释 |
DocumentFragment |
文档片段 |
这7种都继承了Node对象。
根据ID名获取元素 document.getElementById():
Document的方法 getElementById()返回一个匹配特定 ID的元素,由于元素的 ID 在大部分情况
要求是独一无二的,这个方法自然而然地成为了一个高效查找元素的方法。
<body>
<div class="div1" id="id1">
内容文本
<!-- 注释文本 -->
<div class="inner">内部div</div>
</div>
<div id="time">2022年11月15日</div>
<script>
//根据ID名获取元素
//document.getElementById()
document.getElementById("id1")//返回目标元素节点
//没有匹配的节点 返回空值null
document.getElementById("Id1")//大小写敏感
var timer = document.getElementById("time");
console.log(timer);
console.log(typeof timer);
// console.dir()打印我们返回的元素对象,更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
使用getElementByTagName()方法可以返回带有指定标签名的对象的集合
如果页面元素只有一个元素,返回的还是伪数组的形式,如果页面中没有一个元素则返回空的伪
组形式;
<body>
<div class="div1" id="id1">
内容文本
<!-- 注释文本 -->
<div class="inner">内部div</div>
</div>
<ul>
<li>124</li>
<li>243</li>
<li>354</li>
<li>46546</li>
</ul>
<script>
//根据标签名获取元素
//document.getElementsByTagName()
document.getElementsByTagName("div")//返回了HTMLCollection 类似于数组
//如果没有匹配的内容 返回空集合
document.getElementsByTagName("DIV")//大小写不敏感
document.getElementsByTagName("<div>")//标签名不带尖括号
// 使用getElementByTagName()方法可以返回带有指定标签名的对象的集合
var lis = document.getElementsByTagName("li");
console.log(lis);
console.log(lis[1]);
// 我们要依次打印里面的元素对象时我们可以采用遍历的方法、
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
</script>
</body>
根据类名获取元素 document.getElementsByClassName()
<body>
<div class="div1" id="id1">
内容文本
<!-- 注释文本 -->
<div class="inner">内部div</div>
</div>
<div class="div1 div2">
内容文本
<!-- 注释文本 -->
</div>
<script>
document.getElementsByClassName("div1")//返回了HTMLCollection
document.getElementsByClassName("Div1")//大小写敏感
document.getElementsByClassName("div1 div2")//可以用多个类名作为参数 类名之间用空格隔开
</script>
</body>
根据CSS选择器获取元素:
document.querySelector() 方法
- querySelector()fh返回指定选择器的第一个元素对象 HTML5新增
- 文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的
- 一个 Element对象。
- 如果找不到匹配项,则返回null。
备注: 匹配是使用深度优先先序遍历,从文档标记中的第一个元素开始,并按子节点的顺序依次遍历。
<body>
<div class="div1" id="id1">
内容文本
<!-- 注释文本 -->
<div class="inner">内部div</div>
</div>
<div id="box3">
<ul>
<li>首页</li>
<li>第二页</li>
</ul>
</div>
<script>
document.querySelector(".div1")//返回第一个匹配的元素节点,哪怕有多个满足条件的元素
//没有匹配的元素 返回 null
var firstbox = document.querySelector(".box");
console.log(firstbox);
var nav = document.querySelector("#box3");
console.log(nav);
var li = document.querySelector("li");
console.log(li);
</script>
</body>
document.querySelectorAll() 方法:
<body>
<div id="box3">
<ul>
<li>首页</li>
<li>第二页</li>
</ul>
</div>
<script>
document.querySelectorAll(".div1")//返回NodeList 节点列表 类似于数组的对象
//没有匹配的元素 返回空的NodeList
// querySelectorAll()返回指定选择器的所有元素对象集合
var allbox = document.querySelectorAll(".box3");
console.log(allbox);
var lis = document.querySelectorAll("li");
console.log(lis);
</script>
</body>
^_^` ~_~ ^_^赶紧收藏起来吧!