Dom:
* 概念：Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作
* Dom将HTML文档表达成树结构
* W3C Dom 标准被分为 3 个不同的部分:
* 核心 Dom - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
--------------------------------------------------------------------
* Node：节点对象，其他5个的父对象
* XML Dom - 针对 XML 文档的标准模型
* HTML Dom - 针对 HTML 文档的标准模型
一、核心DOM模型：
* Document：文档对象
1、创建（获取）：在html dom模型中可以使用window对象获取
1、window.document
2、document
2、方法：
1、获取Element对象：
1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一
2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组
3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组
4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组
<div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div class="cls4">div4</div> <div class="cls5">div5</div> <input type="text" name="username"> <script> //1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一 var div = document.getElementById("div1") //2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组 var divs = document.getElementsByTagName("div") // alert(divs.length) //3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组 var div_cls = document.getElementsByClassName("cls5") alert(div_cls.length) //4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组 var ele_username = document.getElementsByName("username") alert(ele_username.length) </script>
2、创建其他DOM对象：
* createAttribute(name)
* createComment()
* createElement()
* createTextNode()
3、属性：
* Element：元素对象
1、 获取/创建：通过document来获取和创建
2、 方法：
1、removeAttribute()：删除属性
2、setAttribute()：设置属性
<a>点我点我</a>
<input type="button" value="设置属性" id="btn_set">
<input type="button" value="删除属性" id="btn_remove">
<script>
//获取btn
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href", "https://www.baidu.com")
}
//获取btn
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href", "https://www.baidu.com")
}
</script>
* Node：节点对象，其他5个的父对象（节点对象代表文档数中的一个节点）
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom数：
* appendChild()：向节点的子节点列表的结尾添加新的子节点
* removeChild()：删除（并返回）当前节点的指定子节点
* replaceChild()：用新节点替换一个子节点
* 属性：
* parentNode 返回节点的父节点
<style> div{ border: 1px solid black; } #div1{ 200px; height: 200px; } #div2{ 100px; height: 100px; } #div2{ 50px; height: 50px; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0)" id="del">删除子节点</a> <a href="javascript:void(0)" id="add">添加子节点</a> <!-- <input type="button" value="删除子节点" id="del"> --> <script> //1、获取超链接 var element_a = document.getElementById("del"); //2、绑定单击事件 element_a.onclick = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2) } /* 超链接功能： 1、可以被点击：样式 2、点击后跳转href指定的url 需求：保留1功能，去掉2功能 实现：href="javascript:void(0)" */ //1、获取超链接 var element_add = document.getElementById("add"); //2、绑定单击事件 element_add.onclick = function(){ var div1 = document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } var div2 = document.getElementById("div2") var div1 = div2.parentNode alert(div1) </script> </body>
二、HTML DOM
1、标签体的设置和获取：innerHTML
2、使用html元素对象的属性
3、控制样式
1、使用元素的style属性来设置，如：
<div id="div1"> div </div> <script> var div1 = document.getElementById("div1"); div1.onclick = function(){ //修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size --> fontSize div1.style.fontSize = "20px"; } </script>
2、提前定义好类选择器的样式，通过元素的className属性来设置class属性值
//修改方式2
//className
var div2 = document.getElementById("div2");
div2.onclick = function(){
div2.className = "d2"
}