JavaScript DOM操作

文章目录

  • JavaScript DOM操作
    • DOM操作元素
      • DOM查询
        • 修改元素内容/属性
        • 获取元素节点
      • DOM的增删改
    • DOM操作CSS
      • 内联样式
      • 获得当前正在显示的样式
    • DOM的事件操作
      • 事件对象
        • 事件对象的属性
      • 事件的冒泡和事件的委托
        • 事件冒泡
        • 事件委派
        • 事件的传播
        • 事件的绑定

JavaScript DOM操作

DOM操作元素

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

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

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

JavaScript DOM操作_第1张图片
JavaScript DOM操作_第2张图片

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

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)
JavaScript DOM操作_第3张图片
event.wheelDalta 获得滚轮的方向 正向上滚,负向下滚
event.target 触发事件的对象
event.keyCode 获取按键的编码 event.altKey/ctrlKey/shiftKey判断alt/ctrl/shift是否被按下

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

事件的冒泡和事件的委托

事件冒泡

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

JavaScript DOM操作_第4张图片
假设如图,从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上,但是点击整个绿色的区域都会触发。

JavaScript DOM操作_第5张图片

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;
	}
	}

}

事件的传播

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

事件的绑定

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

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

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

你可能感兴趣的:(JavaScript,javascript)