8.DOM模型
目录
一、HTML DOM 树
HTML DOM 模型被构造为对象的树。
DOM规定HTML中每一个成分都是一个节点。
- 文档节点(document对象)：代表整个节点
- 元素节点（element对象）：代表一个元素
- 文本节点（text对象）：代表元素（标签）中的文本
- 属性节点（attribute对象）：代表属性
- 注释也是一个节点，注释节点（comment对象）
js可以修改HTML元素、属性、CSS样式
二、DOM文档的加载步骤
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、DOM树构建完成。
5、加载图片等外部文件。
6、页面加载完毕。
注意：需要注意的是DOM数先构建完成，才加载图片等外部文件。
三、DOM节点——节点查找
直接查找
document.getElementById 根据id获取一个标签
document.getElementsByClassName 根据class值获取一个标签的属性，返回数组
document.getElementsByTagName 根据标签名获取标签合集
间接查找
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
var a = document.getElementById('d1');
a.aprentElement;
a.parenmentElement.innerText = 'qwe'; //这会将d1的父级标签下的所有文本改成qwe
var cc = doucment.getElementByclassName('cc');
cc[0].children; //返回一个数组
四、DOM节点——节点操作
4.1 创建一个节点
document.createElement('标签名称')
var aa = document.createElement('a');
a.innerText = 'google';
var d = document.createElement('div');
4.2 添加节点
appendChild(新元素)：把当前创建的新元素添加到容器(div等)的末尾
insertBefore(新元素, 老元素)：在当前容器(div等)中，把新元素添加到老元素之前
dd = document.getElementByid('dd'); //找到div标签
dd.appendChild(aa); //aa是上面创建的a标签,将aa添加到dd这个div标签下
4.3 删除节点
removeChild(元素)：获得要删除的元素，通过父元素调用删除
dd.removeChild(d2);
4.4 替换节点
replaceChild(新元素， 老元素)：在当前容器中，拿新元素替换老元素。
dd.replaceChild(newnode, 某个节点)
4.5 复制节点
cloneNode(false/true):把原有的元素复制一份一摸一样的
false：只复制当前元素本身
true：深度copy，当前元素和后代都复制
document.body.appendChild(box2.cloneNode()) // -> 克隆盒子并添加到body末尾,但不克隆子元素及内容
document.body.appendChild(box2.cloneNode(true)) // -> 克隆元素并添加到body末尾,克隆子元素及内容(即使是深度克隆也只是克隆内容和结构,并不会克隆盒子上发生的事件)
4.6 文本操作
dd.innerText = "<a></a>"; //只能是纯文本
dd.innerHTML = "<a></a>"; //能识别标签，也可以是纯文本
4.7 属性操作
//获取标签属性
console.log(oH2.getAttribute('class'));//
//设置标签属性
oA.setAttribute('href','https://www.baidu.com');
//删除元素上的属性
oA.removeAttribute('href');
getAttribute不可以操作class，因为不唯一。
//取属性值 :
// 方式一
ele.getAttribute('id');
// 方式二
ele.id;
// 属性赋值
// 方式一
ele.setAttribute('id','d3');
// 方式二
ele.id = 'd3';
4.8 值的操作
value属性可设置或返回单选按钮的value属性的值。
var inp = document.getElementById('username');
inp.value; //查看值
inp.value = 'an'; //设置值
//选择框
<select name='city' id = 'city'>
<option value='1'>北京</option>
<option value='2'>上海</option>
<option value='3'>杭州</option>
</select>
//查看值
var inp = document.getElementById('city');
inp.value;
inp.value = '1';
4.8 class操作
dd.classlist; 返回这个标签所有的class，是一个list。
var d = document.getElementById('oo');
d.classList;
d.classList.add('aa1');
d.classList.remove('aa1');
d.classList.contains('aa1'); //判断是否有这个class，有就返回true，否则返回false
d.classList.toggle('aa1'); //有就删除，没有就增加
d.style.backgroundColor = 'red'; //带'-'的css属性要去掉'-',后面单词的首字母大写
d.style.height = '100px';
五、事件
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行，通常和标签绑定事件。
绑定事件：
5.1 onclick
鼠标点击时
方式一：
<body>
<div id='d1' class='c1' onclick='func1();'>
</div>
<script>
func1 f1(){
var d = document.getElementById('d1');
d.style.backgroundColor = 'red'
}
</script>
</body>
方式二：
<script>
var d = document.getElementById('d1');
d.onclick = function(){
d.style.backgroundColor = 'red';
}
</script>
方式三：
<body>
<div id='d1' class='c1' onclick='func1(this);'>
</div>
<script>
func1 f1(){
this.style.backgroundColor = 'red'
}
</script>
</body>
5.2 onfocus和onblur
<body>
<div id='d1' class='cc1'>
</div>
username<input type='text' id='username'>
<script>
//onfocus事件，获得光标
var inp = document.getElementById('username');
inp.onfocus = function(){
var d = document.getElementById('d1');
d.style.backgroundColor = 'red'
}
// onblur 失去光标时触发的事件
inp.onblur = function(){
var d = document.getElementById('d1');
d.style.backgroundColor = 'green';
}
</script>
</body>
5.3 onchage
<body>
<div id='d1' class='c1'></div>
<select name = "" id = "j">
<option values="1">an</option>
<option values="2">bn</option>
<option values="3">cn</option>
</select>
<script>
//onchange事件，内容发生时触发
var s = document.getElementById('j')
s.onchange = function(){
console.log(this.options[this.selectedIndex].innerText + '舒服')
//this.options select标签的所有的option标签
//this.selectedIndex被选中的标签在所有标签中的索引值
//
}
</script>
</body>
5.4 其他属性和方法
| 属性 | 发生场景 |
|---|---|
| onabort | 图像的加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像时发生的错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一幅图完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标移动到某元素之上 |
| onmouseup | 鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onselect | 文本被选中 |
| onsubmit | 确认按钮被点击 |
| onunload | 用户退出页面 |
