目录
一、什么是DOM
DOM,全称Document Object Model,文档对象模型,用于操作HTML文档。DOM把整个HTML文件看作是一个树形结构,每一个元素就代表一个节点,该树形结构的根不是html标签,而是一个Document对象。
Document对象:不是手动创建的,而是JS解释器自动创建,并且一个页面有且仅有一个document。
作用:通过document能找到页面上的每一个DOM元素/节点。
注意:Document会把页面上的每一个元素、属性、注释等都当做是元素/节点。
二、DOM的基本操作
根据ID查找元素
语法:document.getElementById("id值")
由于id的唯一性,所以通过id获取到的元素也只有一个,即使有多个元素的id相同,也只会找到第一个。
注意:在JS中,元素的id属性的值可以直接当作变量来使用。
<body>
<div id="div1"></div>
<script>
console.log(div1)
</script>
</body>
根据标签名查找元素
语法:document.getElementsByTagName("标签名")
由于可能会有很多相同的标签,所以通过这种方法获取的元素数量会≥1,即得到的结果是一个数组。但该数组不能使用一般数组的常用方法,只能通过遍历获取其中的每一项。如:数组名.push()等,所以该数组又叫做伪数组。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
console.log(lis)
</script>
</body>
根据类名进行查找
语法:document.getElementsByClassName("类名")
同样的,最后返回的结果也是一个伪数组。
<body>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var uls = document.getElementsByClassName("ul");
console.log(uls)
</script>
</body>
根据选择器查找
DOM支持通过选择器进行元素的查找,如id选择器,标签选择器,群组选择器,后代/子代选择器等等。
1、通过选择器查找一个:document.querySelector("选择器"),没有则返回null
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var li = document.querySelector("ul>li");
console.log(li) //只会找到ul下面的第一个li
</script>
</body>
2、通过选择器查找所有:document.querySelectorAll("选择器"),返回的也是一个伪数组。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var li = document.querySelectorAll("ul>li");
console.log(li) //会找到ul下面的所有li
</script>
</body>
通过节点关系查找
可以通过节点和节点之间的关系进行查找,如父节点、子节点、兄弟节点等。
常用的有:
查找父节点:元素.parentNode
查找子节点:元素.children---返回的是一个伪数组
查找第一个儿子节点:元素.firstElementChild
查找最后一个儿子节点:元素.lastElementChild
查找前一个兄弟节点:元素.previousElementSibling
查找后一个兄弟节点:元素.nextElementSibling
注意:查找元素不一定非要从document根开始,也可以从某个父元素开始进行查找。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.querySelector("ul");
var lis=ul.getElementsByTagName("li")
console.log(lis) //会找到ul下的所有li
</script>
</body>
二、元素的基本操作
操作元素内容
常用的操作元素内容有两个:innerText和innerHTML
获取元素内容:元素.innerText 或者 元素.innerHTML。
设置元素内容:
元素.innerText="新内容"
元素.innerHTML="新内容"
区别:innerText只能支持纯文本的获取和设置,而innerHTML可以支持HTML标签的设置。
var div=document.querySelector("div")
div.innerText="哈哈" //正常显示
div.innerText="<h1>哈哈</h1>" // 在页面上原样显示,不会解析h1标签
div.innerHTML="你好" // 正常显示
div.innerHTML="<h1>哈哈</h1>" //会将h1解析成html标签,然后显示
操作元素属性
1、操作元素原生属性:
获取:元素.属性
设置:元素.属性="新属性值"
2、操作元素自定义属性(也可以原生属性):
获取:元素.getAttribute("属性名")
设置:元素.setAttribute("属性名","属性值")
删除:元素.removeAttribute("属性名")
操作元素类名
获取:元素.className
设置:元素.className="新类名"
操作元素行内样式
获取:元素.style.样式名
设置:元素.style.样式名="样式值"
在学会DOM的基本操作后,就可以结合之前所学的,给元素绑定事件,如:给元素添加点击事件
<body>
//添加点击事件方式一,直接在开始标签内添加onclick属性
<button onclick="函数名或代码">点击</button>
<script>
var btn=document.querySelector("button")
// 添加点击事件方法二,获取元素之后,添加onclick方法,给这个onclick方法赋值一个函数
btn.onclick=function(){
函数体
}
</script>
</body>
补充:在函数中可以使用this关键字来替代当前绑定事件的元素,this本质是一个指针。
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//这里的this指的就是btns[i]
if (this.innerText == "C") {
text.innerText = "";
} else if (this.innerText == "=") {
if (text.innerHTML == "") {
alert("请输入内容再计算");
} else {
// 计算
text.innerHTML = eval(text.innerHTML);
}
} else {
text.innerHTML += this.innerText;
}
};
}