DOM简介
文档对象模型（Document Object Model）,是W3C推荐处理可扩展标记语言（HTML或XML）的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式
DOM树
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：页面中所有的内容都是节点（标签，属性，文本，注释），DOM中使用node表示
获取元素
document.getElementById()
使用getElementsByTagName（）方法返回带有指定ID的对象
//设置P标签id为‘P1’.标签ID大小写敏感
<p id="p1">Hello world!</p>
//通过标签id拿到标签，并修改字体颜色为blue
document.getElementById("p2").style.color="blue";
##document. getElementsByTagName()
使用getElementsByTagName（）方法返回带有指定标签名的对象集合
<body>
<ul>
<li>对影成三人</li>
<li>对影成三人</li>
<li>对影成三人</li>
</ul>
</body>
//通过标签名拿到标签数组
var lis = document.getElementsByTagName("li");
//通过数组下标拿到第一个梨li,并改变字体颜色为blue
lis[0].style.color='blue';
document.getElementsByClassName()
使用getElementsByClassName（）方法返回带有指定类名的对象集合
<body>
<ul class='table'>
<li>对影成三人</li>
<li>对影成三人</li>
</ul>
</body>
//通过标签名拿到标签数组
var lis = document.getElementsByClassName("table");
//通过数组下标拿到第一个梨li,并改变字体颜色为blue
lis[0].style.color='blue';
document.querySelect()
根据指定选择器，返回第一个元素对象
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">盒子3</div>
<div>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
</body>
//querySelect 返回指定选择器的第一个元素对象。参数名称写法同CSS选择器一样
var firstBox = document.querySelect(".box");
var nav = document.querySelect("#nav");
var li = document.querySelect("li");
document.querySelectAl l()
根据指定选择器，返回元素对象集合
<body>
<ul>
<li>对影成三人</li>
<li>对影成三人</li>
</ul>
</body>
//通过标签名拿到标签数组
var lis = document.querySelectAll("li");
//通过数组下标拿到第一个梨li,并改变字体颜色为blue
lis[0].style.color='blue';
获取body和html
//获取body元素
var bodyEle = document.body;
获取html元素
var htmlEle = document.documentElement;
事件
事件三要素
事件由三部分组成：事件源、事件类型、事件处理程序。我们也称之为事件三要素
<button>按钮</button>
<script>
// 事件源 ：事件触发的对象->按钮
var btn = document.querySelect('button');
//事件类型 ：鼠标点击事件，鼠标经过事件，键盘按下等都是事件类型->onclick
btn.onclick = response();
//事件处理程序 ：响应事件的方法->response
function response(){
consloe.log('你瞅啥');
}
</script>
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获取鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
传统注册（绑定）事件
执行事件的步骤
1:获取事件源
2:注册事件（绑定事件）
3:添加事件处理程序（采用函数赋值形式）
4:取消事件
//获取事件源
var div = document.querySelect('div');
//注册事件（绑定事件）div.onclick
//添加事件处理程序
div.onclick = function(){
consloe.log('你瞅啥');
}
//取消事件
div.onclick = null;
方法监听注册（绑定）事件
eventTaget.addEventListener(type, listener,useCapture)
该方法将指定的监听器注册到eventarget(目标对象)上，当该对象触发指定的事件时，会执行世界处理函数
type：事件类型字符串，比如click, mouseover,注意这里不要带no
listener：事件处理函数
useCapture：可选参数，是一个默认false布尔值。false 按事件冒泡顺序执行，true按事件捕获顺序执行
//获取事件源
var btn = document.querySelect('button');
//添加事件处理程序
btn.addEventListener('click',listener);
//listener方法
function listener(){
alert(22);
}
//取消事件
btn.removeEventListener('click',listener);
eventTaget.attachEvent(eventNameWithOn, callback)（IE9前不支持）
该方法将指定的监听器注册到eventarget(目标对象)上，当该对象触发指定的事件时，会执行世界处理函数
eventNameWithOn：事件类型字符串，比如onclick, onmouseover,注意这里要带no
callback：事件处理函数
DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分两种
事件冒泡：事件开始时由最具体的元素接收，逐级向上传递到DOM最顶层节点的过程。
事件捕获：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。注意：JS代码中只能执行事件捕获或事件冒泡的其中一种事件流
onclick和attachEvent 只遵循事件冒泡流
<div class="father">
<div class="son">son盒子</div>
</div>
var son = document.querySelector('.son');
son.addEventListener('click',function (){
alert('son');
},true);
var father = document.querySelector('.father');
father.addEventListener('click',function (){
alert('father');
},true);
//点击son盒子的时候，addEventListener 第三个参赛为trun。按事件捕获顺序显示：father->son
//当设置addEventListener 第三个参赛为false的时候，按事件冒泡顺序显示：son->father
阻止事件冒泡
stopPropagation（） 和 cancelBubble
<div class="father">
<div class="son">son盒子</div>
</div>
var son = document.querySelector('.son');
son.addEventListener('click',function (event){
alert('son');
//阻止事件冒泡
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = ture;
}
},false);
var father = document.querySelector('.father');
father.addEventListener('click',function (event){
alert('father');
},false);
//当设置addEventListener 第三个参赛为false的时候，按事件冒泡顺序显示：son->father
事件对象：event
<div>某个时间<div>
var div = document.querySelect('div');
div.onclick = function(event){
event = event || window.event;
console.log(event);
//1.event就是一个事件对象 写到我们的事件处理函数的小括号中当形参看
//2.事件对象event只有有了事件才会存在，它是系统自动给我们自动创建的，不需要我们传递参数
//3.事件对象event是我们事件一系列相关数据的集合。比如：鼠标点击里面就包含了鼠标相关的信息，鼠标坐标；如果是键盘事件里面就包含了键盘事件的信息，判断用户按下了那个键。
//4.这个事件对象我们可以自己命名，例如 event evt e
//5.事件对象也有兼容性 ie678 通过window.event来获取事件对象 兼容性写法event = event || window.event;
}
事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| event.target | 返回触发事件的对象 |
| event.srcElement | 返回触发事件的对象 |
| event.type | 返回事件类型：例如click mouseover |
| event.cancelBubble | 阻止事件冒泡 IE6-8使用 |
| event.returnValue | 该属性阻止默认事件 IE6-8使用 |
| event.preventDefault() | 该方法组织默认事件 IE9及以上使用 |
| event.stopPropagation() | 阻止事件冒泡 |
阻止默认事件
preventDefault（） 和 returnValue
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 常见事件对象的属性和方法
// 1. 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
// 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
})
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
return false;
alert(11);
}
</script>
</body>
事件委托
事件委托原理：不是给每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上。然后利用冒泡原理影响设置每个子节点。
<body>
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('知否知否，点我应有弹框在手！');
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
操作元素
操作元素内容
element.interText
从启始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
<div>某个时间<div>
<button>显示时间</button>
var btn = document.querySelect('button');
var div = document.querySelect('div');
btn.onclick = function(){
div.innerText='2020-10-24';
}
element.innerHTML
从启始位置到终止位置的内容，包括html标签，同时保留空格和换行
<div>某个时间<div>
<button>显示时间</button>
var btn = document.querySelect('button');
var div = document.querySelect('div');
btn.onclick = function(){
div.innerHTML='<strong>今天是：</strong>2020-10-24';
}
- interText 不识别html标签 并且会去处空格和换行
- innerHTML 能识别html标签
- interText,innerHTML不仅能设置标签的内容，还能获取该标签当前内容
操作元素属性
src 、href、 id 、alt、 title等这些图片属性一样可以被修改
type 、value、checked、selected、disabled等表单属性同样可以被修改
<button id='ldh'>刘德华</button>
<button id='zxy'>张学友</button>
<img src="images/ldh.jpg" alt="" title="刘德华">
var ldh = document.querySelect('#ldh');
var zxy = document.querySelect('#zxy');
var img = document.querySelect('img');
zxy.onclick = function(){
img.scr='image/zxy.jpg';
img.title = "张学友";
}
ldh.onclick = function(){
img.scr='image/ldh.jpg';
img.title = "刘德华";
}
操作元素样式
我们可以通过JS修改元素的大小，颜色，位置等样式。
element.style
行内样式操作
//css
div{
width:200px;
height:200px;
background-color:red;
}
//html
<div>刘德华<div>
//js
var div = document.querySelect('div');
div.onclick = function(){
//div.style 里面的属性 采用驼峰命名法
this.style.backroundColor = "purple";
this.style.height = "250px";
}
element.className
类名样式操作
className 会直接更改元素的类名，会覆盖原先的类名。
//css
div{
width:200px;
height:200px;
background-color:red;
}
.change{
background-color:purple;
color:#fff;
height:250px;
}
//html
<div class="first">刘德华<div>
//js
var div = document.querySelect('div');
div.onclick = function(){
//让我们当前元素（div）的类名改为change
this.className = "change";
//如果元素开始有类名，并且我们要保留两者。可以用如下写法
//this.className = 'first change';
}
自定义属性
获取属性值getAttribute
1:通过element.属性，来获取属性值
2:通过element.getAttribute(‘属性’), 来获取属性值
区别：
element.属性 用来获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)主要用来获取自定义属性值（程序员自己定义的属性）
自定义属性data-
程序员自己给HTML标签添加的属性，称为自定义属性。
自定义属性命名一般为：data-xxx
<div id="first" data-index="1">刘德华<div>
var div = document.querySelect('div');
//通过element.属性 方法，获取元素属性值
console.log(div.id);
//element.getAttribute('属性') 获取自定义属性data-index值
console.log(div.getAttribute('data-index'));
设置属性值setAttribute
1:通过element.属性 = 'zhzhi '，来设置属性值
2:通过element.setAttribute(‘属性’,‘值’), 来设置属性值
<div id="first" data-index="1">刘德华<div>
var div = document.querySelect('div');
//通过element.属性 = ‘值’ 设置元素属性值
div.id = 'two';
//element.setAttribute('属性''值') 设置自定义属性data-index值
div.setAttribute('data-index',2)
移除属性removeAttribute
element.removeAttribute(‘属性’);
节点操作
节点分：元素节点，文本节点
parentNode :父节点
childNodes :返回的子节点中包含了元素节点，文本节点等等
children:通常使用该方法。它返回所有子元素节点，其余节点不返回
firstElementChild :返回第一个元素子节点
lastElementChild:返回最后一个子元素节点
nextSibling:下一个兄弟节点,返回当前元素的下一个兄弟节点，包含了元素节点，文本节点等
previousSibling:上一个兄弟节点，返回上一个元素的兄弟节点，包含了元素节点，文本节点等
nextElementSibling:返回当前元素的下一个兄弟元素节点
previousElementSibling:返回当前元素的上一个兄弟元素节点
创建节点
document.createElement(‘tagName’)
<ul>
<li>123</li>
</ul>
//创建节点
var li = document.createElement('li');
//添加节点 node.appendChild(child)
var ul = document.querySelect('ul');
ul.appendChild(li);
//插入节点 node.insertBefore(child,指定元素)
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
添加节点
node.appendChild(child)
在元素后面添加节点
node.insertBefore(child,指定元素)
插入节点到指定元素
删除节点
node.removeChild(child)
复制节点
node.cloneNode()
括号为空或者里面是false 为浅拷贝，只复制标签，不复制标签里内容
括号为true为深拷贝，复制标签，也复制标签里内容
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
