进阶 4 - DOM 对象
DOM document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document
console.log( document ); // 获取当前文档的对象查找标签
直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
//返回dom对象，就是标签对象或者数组CSS选择器查找
//根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelector("css选择器")
// 根据css选择符来获取查找到的所有元素,返回数组
document.querySelectorAll("css选择器");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">DIV1</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="outer">
<div class="c1">item</div>
</div>
<div class="c2">
<div class="c3">
<ul class="c4">
<li class="c5" id="i2">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>
<script>
// 直接查找
var ele = document.getElementById("i1"); // ele就是一个dom对象
ele.innerText = 'hello bobo'; //将该标签内容修改成了hello bobo
console.log(ele);
var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]
console.log(eles);
var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]
console.log(eles2);
//定位outer下的c1对应的标签
var outer = document.getElementsByClassName("outer")[0];
var te = outer.getElementsByClassName("c1");
console.log(te);
// css选择器
//层级定位(空格可以表示一个或多个层级)
var dom = document.querySelector(".c2 .c3 .c5");
console.log(":::",dom);
//层级定位
var doms = document.querySelectorAll("ul li");
console.log(":::",doms);
</script>
</body>
</html>绑定事件
静态绑定 ：直接把事件写在标签元素中
<div id="div" onclick="foo()">click</div>
<script>
function foo(){
console.log("foo函数");
}
</script>
动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定
<p id="i1">试一试!</p>
<script>
var ele=document.getElementById("i1");
ele.onclick=function(){
console.log("ok");
};
</script>
Last updated