目录
前言
找老师验收关卡，老师问的问题我都回答不上！但是感觉自己程序也写的出来呀！我cry了，老师都呆了：“这怎么啥都不会呀！学的啥呀！” 。怎么解决学完就忘的问题，当然还是得总结复习呀！毕竟十八岁的美女都是健忘的只会记住最重要的你呀！
DOM概念
什么是DOM？
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM即文档对象模型，是 HTML 的标准对象模型和编程接口，简而言之DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。什么是文档对象？HTML里面的所有元素都是对象。
DOM基本功能
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素
DOM树
节点node：网页中所有内容都是节点（标签、属性、文本、注释等）；
文档节点：页面即文档，整个文档是一个文档节点；
元素节点：每个标签，例如<html>、<a>、<title>等；
属性节点：每个属性，例如<a>的href属性；
DOM事件流
什么是事件？
HTML 事件是发生在 HTML 元素上的事情。
例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件， 想要详细去了解可以点击这里： HTML DOM 事件对象 | 菜鸟教程
事件三要素
- 事件源：事件被触发的对象 （是谁干了这件事！）
- 事件类型：如何触发什么事件 ，例如：鼠标点击、鼠标经过、键盘按下（干了啥！）
- 事件处理程序：通过函数赋值的方式（怎么干的！）
事件的执行步骤
- 获取事件源
- 注册事件（绑定事件）元素可以不用添加事件
- 添加事件处理程序（采用函数赋值的形式）
什么是事件流？
事件流简单来说就是事件执行的顺序流，描述页面中接收事物的顺序元素节点在特定顺序之间传播的过程即DOM事件流。
三个阶段
捕获阶段：事件从Document节点自上而下从大往小向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自下而上从里往外向Document节点传播的阶段。
DOM核心：元素及元素属性的增删改查
元素的增删改查
获取元素
- 通过元素 id 来查找元素 document.getElementById(id)
- 通过标签名来查找元素 document.getElementsByTagName(name)
- 通过类名来查找元素 document.getElementsByClassName(name)
- 查找符合条件的第一个元素 document.querySelector(CSS selectors)
- 查找符合条件的所有元素 document.querySelectorAll(selectors)
- 查找body标签（特殊） document.body 无括号
- 查找html标签 （特殊） document.documentElement 无括号
<body>
<ul class="uu">
<li id="li1">我是小li 1</li>
<li>我是小li 2</li>
<li>我是小li 3</li>
<div>我是div </div>
</ul>
<script>
//通过id名查找元素
var li1 = document.getElementById('li1');
var li11 = document.querySelector('#li1');//ID名加# 只能找到符合条件的第一个
//通过class类名查找
var ul1 = document.getElementsByClassName('uu');
var ul11 = document.querySelector('.uu');//类名加点 只能找到符合条件的第一个
//通过标签名查找
var div1 = document.querySelector('div');//标签名不加 只能找到符合条件的第一个
var div11 = document.getElementsByTagName('div');
//查找所有li
var lis = document.querySelectorAll('li');
//如果查找 ID名加# 类名加点 标签名不加 返回值为符合条件的元素集合
//查找body标签
var body1 = document.body;//无括号
//查找HTML标签
var HTML = document.documentElement;//无括号
</script>
</body>创建及添加元素
- 创建元素 document.createElement(element)
- 追加元素 document.appendChild(element)
- 插入元素 parentnode.insertBefore(newnode,existingnode)
<body>
<ul class="uu">
<li id="li1">我是小li 1</li>
<li>我是小li 2</li>
<li>我是小li 3</li>
</ul>
<script>
//第一步创建元素
var li4 = document.createElement('li');
var li5 = document.createElement('li');
//第二步给创建的元素赋值（否则为空）
li4.innerHTML = '我是小li 4';
li5.innerHTML = '我是小li 5';
var ul = document.querySelector('ul');//获取ul
//ul里面追加li4到最后一个
ul.appendChild(li4);
//ul插入li5到第一个
ul.insertBefore(li5, ul.children[0]);
</script>
</body>移除元素和替换元素
- 删除元素 parentnode.removeChild(element)
- 替换元素 parentnode.replaceChild(new element，old element)
<body>
<ul class="uu">
<li style="background-color: pink;">我是小li 1</li>
<li style="color: plum;">我是小li 2</li>
<li>我是小li 3</li>
</ul>
<script>
var lis = document.querySelectorAll('li');
var ul = document.querySelector('ul');
//删除第三个li元素
ul.removeChild(lis[2]);
//替换元素
var li = document.createElement('li');
li.innerHTML = '我被替换啦！'
//将第二个元素替换成新的li
ul.replaceChild(li, lis[1]);
</script>
</body>修改元素内容、样式、属性
修改元素内容
- 修改元素内容 element.innerHTML = new html content
修改元素样式
- 改变元素的样式 element.style.property = new style
- 给元素添加新类 element.className = new className
<style> .pink { background-color: pink; font-size: 25px; color: rgb(245, 6, 153); } .red { background-color: red; font-size: 10px; color: blue; } </style> <body> <ul class="uu"> <li class="pink">我是小li 1</li> <li class="red">我是小li 2</li> <li>我是小li 3</li> </ul> <script> var lis = document.querySelectorAll('li'); //修改第一个li的背景颜色 lis[0].style.backgroundColor = 'yellow'; //删除第二个li的red类 lis[1].className = ''; //给第三个li增加red类 lis[2].className = 'red'; </script> </body>
修改元素属性
- 改变元素的属性 element.setAttribute(attribute, value)
- 获取元素的属性 element.getAttribute(attributename)
- 创建元素的属性 document.createAttribute(attribute, value)
- 删除元素的属性 element.removeAttribute(attributename)
<style>
.becomered {
color: red;
}
.becomepink {
color: pink;
}
.becomeblue {
color: blue;
}
</style>
<body>
<ul>
<li>我是小li 1</li>
<li>我是小li 2</li>
<li class="becomeblue">我是小li 3</li>
<li class="becomeblue">我是小li 4</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
//创建元素的属性
var a = document.createAttribute('class');
a.value = 'becomered';
//将属性添加到第一个li
lis[0].setAttributeNode(a);
//将属性添加到第二个li
lis[1].setAttribute('class', 'becomepink');
//删除第三个li的属性
lis[2].removeAttribute('class');
//获取第四个li的属性
var b = lis[3].getAttribute('class')
console.log(b);
</script>
</body>总结
知识越学越多也越来越杂，看什么东西都像“熟悉的陌生人”：我在哪里讲过你！在哪呢？你是做啥的呢？你叫什么名字？却也一个都想不起来，真实的我本人就是这样！而且程序员的代码就是一个字母即可改变整个页面。总觉得多总结可以有效控制发量哈哈哈哈~~~
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
