JavaScript DOM操作

JavaScript DOM操作

DOM操作元素

DOM全程Document Object Model文档对象模型。
文档表示的是整个的HTML网页文档;
对象表示将网页中的每一个部分都转换成了一个对象;
模型来表示对象之间的关系(DOM树),方便我们获取对象。

节点：网页中的每个部分都是一个节点

• 文档节点:整个HTML文档，一个页面就是一个文档
• 元素(标签)节点:HTML文档中的HTML标签
• 属性节点:元素的属性
• 文本节点:HTML标签中的文本内容

浏览器加载一个页面时，是按照自上向下的顺序加载的，读取一行就运行一行

DOM查询

Document对象
实际上是window对象的属性。
代表整个网页，相当于dom树的入口，提供给我们查询节点。
这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。

修改元素内容/属性

innerText属性 获取到元素内部的文本内容，会自动将html标签去除
innerHTML属性 获取到元素内部的文本内容，会保存html标签

修改元素属性

修改元素属性
1.获取到元素节点对象
2.通过元素节点对象的属性( .或者[] )修改,

方法	不同点
对象.属性	1.获取的是内置属性 2.class属性需要使用 元素.className
element.getAttribute(属性名) element.setAttribute(属性名.值) element.removeAttribute(属性名)	1.既可以获取/修改/删除内置属性，也可以获取/修改/删除自定义属性 2.class属性直接用class

获取元素节点

获取的一组DOM对象都是伪数组

通过document对象调用

语法	描述
document.getElementById(“id”)	通过id获取dom
document.getElementsByClassName(“className”)	通过类名获取domdocument.getElementsByName()
document.getElementsByTagName()	通过标签名获取一组节点对象
document.querySelector(css选择器)	该方法会返回唯一的一个元素节点
document.querySelectorAll(选择器)	返回数组。

获得元素节点的子节点，通过具体的元素节点调用

//id=x节点的下一个子元素节点是id=y的节点。下一个节点是yyy的文本节点
<li id='x'>xxx</li>yyy<li id='y'>zzz</li>

语法	描述
element.getElementsByTagName()	返回element指定标签名的一组后代节点
element.childNodes 属性	element的所有子节点(（ xx 为一个)，DOM标签与标签之间的换行也会看成文本结点
element.children 属性	element的所有子元素节点（ xx 为一个）
element.firstChild 属性	element的第一个子节点，包括空白文本结点
element.firstElementChild属性	element的第一个子元素节点
element.lastChild 属性	element的最后一个子节点

获取父节点和兄弟结点,通过具体的节点调用

语法	描述
element.parentNode 属性	表示当前节点的父节点
element.previousSibling 属性	表示当前节点的前一个兄弟节点，可能会获取到空白文本
element.previousElementSibling 属性	表示当前节点的前一个兄弟元素节点
element.nextSibling 属性	表示当前节点的后一个兄弟节点，可能获取到空白文本
element.nextSiblingElement 属性	表示当前节点的后一个兄弟元素节点

获取body/html标签元素

获取bodydocument.body
获取htmldocument.documentElement

DOM的增删改

语法	描述
document.createElement(标签名)	用于创建一个元素节点对象，并返回创建好的对象
document.createTextNode(文本内容)	根据内容创建文本节点，并返回新的节点
父节点.appendChild(子节点)	向一个父节点中添加新的子节点
父节点.insetBefore(新节点,旧节点)	在指定的子节点前插入新的子节点,父节点调用，对于父节点来说才有子节点
父节点.replaceChild(新节点,旧节点)	使用指定的子节点替换已有的子节点
父节点.removeChild(子节点)	删除一个子节点

DOM操作CSS

内联样式

语法
元素.style.样式名 = 样式值

说明
1.如果css的样式名中含有-,需要改成驼峰命名法。
2.通过style属性设置/读取的样式都是内联样式，内联样式有很高的优先级。
3.通过style属性来修改元素的样式，每修改一个样式，浏览器需要重新渲染一次页面

js中常用驼峰命名法(js中-可以代表减号)，css和html常用 -

获得当前正在显示的样式

只有ie浏览器支持: 元素.currentStyle.样式名

其他浏览器:window.getComputedStyle(获取样式的元素,伪元素/null)
返回值是当前元素对应的样式的对象
如果该样式没设置，获取到的是真实值而不是默认值

通过以上两种方式获取到的样式都是只读的,如果需要修改只能使用style属性
如果要同时修改多个样式，可以新写一个类的样式，直接通过修改节点的类名

处理兼容性问题

定义一个函数来获取指定元素当前的样式，参数obj要获取样式的元素，style要获取的样式名字符串

function getStyle(obj,style){
if(window.getComputedStyle){
//正常浏览器有getComputedStyle方法
return getComputedStyle(obj,null)[style];
}
else{
//IE8浏览器没有定义getComputedStyle
return obj.currentStyle[style];
}
}

注意
if里面用getComputedStyle不行，要用window.getComputedStyle
没使用window时getComputedStyle是一个变量需要去作用域中寻找，没定义就是用会报错，后续代码不会执行
使用window之后属于属性，没找到属性返回undefined

DOM的事件操作

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象(event)作为实参传递给响应函数，封装当前事件相关的一切信息，比如：鼠标坐标，键盘哪个键被按。

但是IE8不会传,事件对象作为window对象的属性保存的window.event
可以使用 event = event || window.event 来解决兼容性问题

事件对象的属性

event.clientX:可以获取鼠标指针的水平坐标，返回数值，不带单位
event.clientY:可以获取鼠标指针的垂直坐标，返回数值，不带单位

假设下图左上角为(0,10)
event.clientX/event.clientY用于获取鼠标在当前的可见窗口的坐标,左上角为(0,0)
event.pageX/event.pageY获取鼠标相对于当前页面(document)的坐标,左上角为(0,10)
position是相当于整个页面,左上角(0,10)

event.wheelDalta 获得滚轮的方向 正向上滚，负向下滚
event.target 触发事件的对象
event.keyCode 获取按键的编码 event.altKey/ctrlKey/shiftKey判断alt/ctrl/shift是否被按下

现在浏览器的滚动条都是html的了

事件的冒泡和事件的委托

事件冒泡

同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？

假设如图，从span->box1->body依次触发

事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递

在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。

let span = document.getElementById("span ");
span.onclick = function(event){
	event = event || window.event;
	//取消冒泡
	event.cancelBubbl = true;
}

事件委派

场景
1.有很多个超链接，我们为每一个超链接都绑定了单击相应函数，这种操作比较麻烦。
2.如果有个按钮，点击之后可以新加超链接，此时循环绑定在a上的点击事件，新加的超链接里面并没有

我们希望，只绑定一次事件，即可用用到多个元素上，即使元素是后添加的
将其绑定给祖先元素,这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的相应函数来处理事件。

事件委派利用了冒泡，通过委派可以较少事件绑定的次数，提高程序的性能

冒泡从内到外向上冒泡，委派从外到内向下委派。

上述的场景中，我们把事件绑定在ul上，但是点击整个绿色的区域都会触发。

ul.onclick = function(event){
//如果触发事件的对象是我们期望的元素，则执行。否则不执行
event = event ||window.event;
//IE浏览器用event.srcElement
let target = event .target || event .srcElement;
//nodeName节点名称是大写，转换小写再做笔记
if(target.nodeName.toLowerCase == "li"){//触发事件的对象
	//这里可以分别为每个id设置不同的操作
	switch(target.id){
		case 'add':
			alert('添加');
			break;
		case 'remove':	
			alert('删除');
			break;
	}
	}

}

事件的传播

W3C将事件传播分为三个阶段
1.捕获阶段，从外层的祖先元素向目标元素进行事件捕获，默认此时不会触发事件
2.目标阶段，事件捕获到目标元素，捕获结束，目标元素触发事件
3.冒泡阶段，事件从目标元素向其祖先元素传递，依次触发祖先元素上的同一事件。

事件的绑定

对象.事件 = 函数
绑定响应函数，同时只能为一个事件绑定一个响应函数,后面的响应函数会覆盖前面的响应函数。

对象.addEventListener()可以为事件绑定多个响应函数
参数:
1.事件的字符串，不用添加前面的on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要布尔值，默认false

对象.removeEventListener(type，handler，false/true)移除事件
参数和addEventListener的参数意思一样。