DOM结点和事件

DOM结点

DOM树

整个文档是文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
所有注释是注释节点

有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。

能够创建新节点，还可以修改和删除所有节点。

Browser BOM

参考文档：前端web之JavaScript DOM(5)_达西布鲁斯的博客-CSDN博客

获取浏览器的地址栏其实有两种方法：

loacation.serch()
其实docunment.url()也是可以的

Window 对象、Screen 对象、location 对象、history对象...还有

Document
Window——【该属性可省略不写】
- setTimeout("执行的语句",时间s)——延时执行（一次）
- clearTimeout(setTimeout函数得到的对象)——停止执行【关闭计时器对象】
- setInterval("执行的语句",时间s)——每隔一段时间就执行
- clearInterval(setInterval函数得到的对象)——停止执行【关闭计时器对象】
Date
- 有参：指定时间
- 无参：当前时间
- JS处理日期时间补0_BUG_Jia的博客-CSDN博客_js时间补0
- JS获取星期几的四种写法 - 百度文库 (baidu.com)

附：节点类型

元素类型	节点类型
元素element	1
属性attr	2
文本text	3
注释 comments	8
文档document	9

DOM结点对象的属性

DOM中的节点属性 (wjhsh.net)

【javascript】Dom节点操作属性和方法_头发超多的程序媛的博客-CSDN博客_js 设置dom节点属性

基本属性：根据结点的类型，其值也不一样

nodeName:
- nodeName 是只读的
- 元素节点的 nodeName 等同于标签名
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 总是 #text
- 文档节点的 nodeName 总是 #document
nodeValue:
- 元素节点的 nodeValue 是 undefined
- 文本节点的 nodeValue 是文本文本
- 属性节点的 nodeValue 是属性值
nodeType:
- nodeType 属性返回节点的类型。nodeType 是只读的

但其实以上的属性都是不太实用的，如果我们需要获取结点的值，推荐用

textContent
inner——不仅仅是获取还能修改结点的html内容

DOM结点操作

待整理：

JavaScript HTML DOM 文档 (w3school.com.cn)

JavaScript HTML DOM - 改变 HTML (w3school.com.cn)

属性操作

参考文档：DOM节点的使用（常用方法+代码）_Yan Yang的博客-CSDN博客

获取元素值
- 元素对象[“属性名”]
- 元素对象.属性名
- 元素对象.getAttribute(“属性名”)；
设置属性值
- 元素对象[”属性名”] = 值
- 元素对象.属性名 = 值
- 元素对象.setAttribute(“属性名”, 值)
删除某个属性值
- removeAttribute（name）

区别：

获取和设置自定义属性值只能通过 getAttribute() 和 setAttribute()
1. getAttribute() 和 setAttribute()不能获取属性中的属性，比如style属性中的属性
获取标签自带的属性值推荐使用
1. 元素对象[“属性名”]
2. 元素对象.属性名

样式操作

设置元素样式：元素.style.样式名=样式值
读取元素样式：——读取到的样式只是值读的不能修改，如果先要修改必须通过Style
- 通过currentStyle.样式名——只ie支持
- getComputerStyle（第一个：要获取样式的元素，第二个：可以传递一个伪元素，一般都传null）
  - 返回一个对象，再通过点调用

(1)元素名.style.display首次获取元素（如果不通过相同的元素名.style.display方法访问赋值那么其值就是''）因为元素名.style.display主要是用来设置样式的

(2)推荐：window.getComputedStyle(this.nextElementSibling).display，这个方法获取元素属性没有这种错误

推荐使用该方法读取DOM结点的样式——参数有两个（一个是要获取属性的DOM结点，一个是伪元素可以不理会（默认会传参））

增删改查

创建添加

创建节点/属性

document.createElement() //创建一个节点
document.createAttribute() //对某个节点创建属性
document.createTextNode() // 创建文本节点

添加结点

document.inseretBefore(nextNode,referenceNode) // 在某个节点前插入节点
parentNode.appendChild(newNode) // 给某个节点添加子节点

删除结点

parentNode.removeChild（node） // 删除某个节点的子节点

修改结点

innerHTML
innerText

查找结点

直接查找

注意事项：

除了通过ID和querySelector查找返回的是一个元素外，其它无论匹配结果有多少元素返回的都是列表，而只有结点对象才能使用对象方法，所以需要遍历
选择器查找不适用于 Internet Explorer 8 及其更早版本。

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.getElementsByName(name)	通过 name 属性
document.querySelectorAll("p.intro");	通过选择器来查找元素（匹配多个）
document.querySelector("p.intro");	同上，只是只匹配一个

DOM导航

参考文档：https://www.w3school.com.cn/js/js_htmldom_navigation.asp

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

向上父级
- parentNode
向下子级
- .firstChild // 获取第一个子节点
- .firstElementChild // 获取第一个元素节点
- .lastChild // 获取最后一个子节点
- .lastElementChild // 获取最后一个元素节点
- .childNodes // 获取节点的所有子节点
前后导航
- previousElementSibling
- nextElementSibling
- previousSibling
- nextSibling

注意事项：结点之间导航的时候可以看到有些方法加了Element的描述有些没有，这是子节点和元素节点的区别（元素节点可以理解为标签结点——>推荐使用Element，方便定位，子节点还包含文本、属性和注释等结点）

事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

更完整的列表：JavaScript HTML 事件实例 (w3school.com.cn)

准确的说on是个关键词，on后的才是事件名

绑定事件

参考文档：js绑定事件的三种方法_王宏涛01的博客-CSDN博客_js 绑定事件

分析文档：js中事件处理函数调用方法对比 - 知乎 (zhihu.com)

传统DOM方式

行内绑定
```
    <div onclick="cli1()"></div>
```

通过元素绑定

 div_.onclick = function(){
       alert('通过元素绑定事件 绑定事件2')
 }

通过事件监听【推荐】

div_.addEventListener('click', function () {
	alert('通过事件监听绑定事件');
})

本质上是函数定义与具体调用事件的解耦，实现了同一事件可以调用多个函数，同一函数可以被多个事件调用，推荐使用。分为需事件对象属性/方法及不需要两种：

函数不需要传入事件对象属性或方法：
- 定义：function functionname(arg) {}，
- 调用：element.addEventListener('event',function() {functionname(arg)},false);
- 这种情况下，如果函数本身不需要任何arg，调用可以简化为：element.addEventListener('event',functionname,false)
函数需要传入事件对象的属性或方法：
- 定义：function functionname(e,arg) {},
- 调用：element.addeventListener('event',function(e) {functionname(e,arg)},false).其中，'e'代表事件对象，在函数定义中可以以e.target代表事件对应的dom元素，例如e.target.id即事件对象元素的id。

在事件监听下，可以对单个事件绑定多个事件处理函数，按绑定顺序执行。

Tip：不能在函数里进行事件监听【待验证】

删除事件监听

 /* 
    给dom元素删除事件监听
    el_obj.removerEventListener(1,2);
    1: 要删除的事件名
    2：相关的事件处理函数（注意：该函数需要时一个外部处理函数）
    */
    btn_2.removeEventListener('click', fn);

给伪元素添加事件的方式

参考文档：HTML标签伪元素绑定事件的三种方式 (gxlsystem.com)

基本分析：

给元素设置pointer-events:none.然后给伪元素的pointer-events：auto；此时我们把点击元素的事件就取消了点击伪元素的时候，就可以绑定相应的事件了
第二种是：通过子元素的事件冒泡原理，在子元素事件处理结束后return false，告知父元素事件处理完毕。这样只就屏蔽了父元素接收事件，然后:after伪元素是悬浮在子元素上面的，故点击伪元素的时候触发父元素事件。

通过js触发自定义事件

参考文章：(45条消息) js 自动触发change事件 - CSDN

var btn = document.querySelector('#txt');
var event = new Event('change');
btn.dispatchEvent(event);

小结：

先new出指定类型的事件对象
再往对象的dispatchEvent方法传入该事件对象作为参数
若对象存在该事件则执行