DOM
DOM:Documment Object Model
文档 对象 应用
通俗:用JS来操作HTML
window.document
整个HTML代码会被浏览器解析为JS对象
这个对象的名字就是Document,储存在全局区的window里面
<script>
// 整个HTML代码会被浏览器解析为JS对象
// 这个对象的名字就是Document,储存在全局区的window里面
console.log(window);
console.log(window.document);
</script>
我们现在是使用log打印的展示的美化后的样式
console.dir(window);
console.dir(window.document);
DOM树
学习DOM之前我们要知道DOM树
HTML的标签解构,如果用途来表示的话,就是层层嵌套,层层递进,这个解构就类似于一棵树
DOM树对照图
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<h1>text1</h1>
<h2>text2</h2>
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
<li>
<em>01</em>
<em>02</em>
<em>03</em>
</li>
</ul>
<script></script>
</div>
</body>
</html>
而结构就是:
DOM操作:就是操作document这个对象,来修改页面的内容
DOM操作分为两类:找到要操作的元素+操作元素的属性
需求向id=box的元素里添加项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
<script>
box.innerHTML="hello DOM !"
</script>
</body>
</html>
为什么JS之中没有box,还能使用不会报错呢?
id:唯一标识:当JS中事故写一个变量,当这个JS里面什么都没有的话,就会去找ID
所以我们一般会去查询到这个属性再使用
所以:
<body>
<div id="box"></div>
<script>
// get:获取
// element:元素
// id:唯一标识
var box = document.getElementById("box");
console.dir(box);
console.log(box);
</script>
</body>
打印一下我们就会发现,他其实是一个超大的对象,
详细打印我们就会发现
接下来我们改个颜色试试
结果:
大家就会说:我这样改的的话还不如直接写个CSS,其实他们之间是有去别的——他是动态的
DOM的事件
事件操作:有了事件之后页面就可以与用户进行操作了
比如说添加一个点击事件点击之后变色
所以我们可以这样写
<body>
<div id="box" onclick="color()">master</div>
<script>
var box = document.getElementById("box");
function color() {
box.style.color = "red";
}
</script>
</body>
当然我们也可以通过回调函数监听来实现
<body>
<div id="box">master</div>
<script>
var box = document.getElementById("box");
box.onclick = function color() {
box.style.color = "red";
};
</script>
</body>
点击前
点击后:
通过标签查找属性
需求:点击list变色
get:获取
Element:元素们
by:通过
Tag:标签
Name:名字