DOM
一、节点树
- 概述:节点即为标签。节点之间的这种关系,我们称之为“节点树”
- DOM【document object model】文档对象模型,可以理解为是整个节点树最外层的“根元素”
- DOM其实就是JS语言中内置引用类型document对象,DOM对象经常用来操作节点(标签)
- 比如操作节点样式、属性
二、DOM属性
- DOM官方给我们提供很多属性、方法。用来操作节点树上面的节点
- 四个属性:documentElement、head、title、body
//DOM:其实就是内置document对象,引用类型数据
console.log(document);//#document 获取整个网页所有节点
console.log(typeof document);//object
</script>
<script type="text/javascript">
//DOM常用属性
//documentElement属性:可以获取到节点树的HTML标签
console.log(document.documentElement);
//head属性:获取到节点树的head标签
console.log(document.head);
//title属性:获取到节点title标签的文本
console.log(document.title);
//body属性:获取到节点body
console.log(document.body);
三、DOM方法
概述:DOM对象,官方也给我们提供很多方法用来操作节点树上的标签
- getElementByID方法:它是DOM对象的方法,可以通过标签的ID选择器,在JS中获取标签
- 一般我们将script便签放在程序最底部
- 不管节点(标签)在网页中嵌套关系如何复杂,都可以通过这个方法获取到
- 注意:标签(节点)在JS当中属于引用类型数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" id="cur">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
color: red;
text-indent: 3em;
background-color: cyan;
}
</style>
<