DOM操作及相关各种对象之间的关系

 Node对象： 以下四个对象都属于(继承自)Node对象。

1 document对象： 代表当前的整个html文档

2 element对象： 代表一个标签元素

3 属性对象： 代表一个标签元素的属性

4 文本对象： 代表一个标签元素的文本

 

 

 

DOM常用及其重要操作总结(由于其中的属性和方法众多， 我们只关注原理和需求)：

对元素节点、文本节点、属性节点的增删改查：

 

元素对象相关操作： 

获取元素对象：

document.getElementById(idName) //通过id号来获取元素，返回一个元素对象
document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组
document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有）
document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组
document.querySelector("#demo"); //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
document.querySelectorAll("#demo"); //querySelector() 方法返回文档中匹配指定 CSS 选择器的所有元素。

 

删除元素对象：

const element  = document.getElementById("div-02")

element.remove();

 

增加元素对象：

 const element01 = document.createElement("h3")       //创建一个html元素，这里以创建h3元素为例

element.appendChild(Node); //往element内部最后面添加一个节点，参数是节点类型
elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

属性对象相关操作：

element.getAttribute(attributeName)     //括号传入属性名，返回对应属性的属性值
element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值

element.removeAttribute(name)：删除属性方法（不能删除value）

element."屬性名" = "屬性值"  ==> 這個方法更加的簡單 ,但是僅限於元素的原有屬性

 

对特殊属性的额外API(例如css属性，class属性):

 设置及其修改css样式(也可以设置为none)：

element.style.color = "red";

添加及其删除class属性：

element.classList.add(value);

element.classList.contains(value);

element.classList.remove(value);

element.classList.toggle(value);

 

 

文本对象相关操作:

我们做此相关的操作往往针对空元素的，所以直接获取以及设置值就行了， 如果想要删除的话， 直接设置为空； 

element.textContent = ""

element.innerHtml = ""

 

事件相关联的操作：

1 常用事件总结

1.1 鼠标事件

复制

1 2 3 4 5 6 7 8 9 10

click           单击 dblclick        双击 contextmenu     右击 mouseover       鼠标悬停在元素上， 建议用 mouseenter 代替 mouseout        鼠标离开元素，建议用 mouseleave 代替 mouseenter      鼠标悬停在元素上 mouseleave      鼠标离开元素 mousedown       鼠标按键按下 mouseup         鼠标按键抬起 mousemove       鼠标移动

1.2 键盘事件

复制

1 2 3

keydown     键盘按键按下 keyup       键盘按键抬起 keypress    键盘按键按下，用于可输入字符按键

1. 哪些元素可以监听键盘事件？

① document

② 可以获取焦点的元素（表单控件，尤其是可输入的元素）

2. keydown 和 keypress 的区别？

① keydown 所有的按键按下都可以触发，无法区分大小写按键。

② keypress 只有可输入字符按键按下才可以触发，可以区分大小写按键。

3. 如何获取按下的是哪个按键？

使用 event 对象中的属性：

• evnet.keyCode 获取按键对应的 ascii 值

• event.which 同 keyCode

• event.key 获取按键的字符值。

1.3 文档事件

复制

1 2 3

load                页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素 DOMContentLoaded    页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用                       addEventListener 监听事件 beforeunload        当关闭网页的时候触发

load 事件与 DOMContentLoaded 事件的区别：

① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。

② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发，不包括外部资源。

1.4 表单事件

复制

1 2 3 4 5 6

submit      当表单提交的时候触发，该事件监听到form元素 reset       当表单重置的时候触发，该事件监听到form元素 focus       当表单控件获取焦点的时候触发 blur        当表控件单失去焦点的时候触发 select      输入框或文本域中的内容被选中 change      对于输入框，内容改变且失去焦点才会触发；适合用于select

1.5 图片事件

复制

1 2	load        图片文件下载完毕 error       图片加载失败

1.6 其他事件

复制

1 2	resize      监听到 window上，视口大小发生改变 scroll      监听到window或者是具有滚动体的元素，页面或元素中的内容发生滚动就触发。

2 Event 对象

2.1 获取 Event 对象

给事件的回调函数设置第一个形参，就可以获取 event 对象。

不同类型的事件获取的 Event 对象类型也不同。

2.2 鼠标事件对象 MouseEvent 的属性和方法

复制

1 2 3 4 5

offsetX / offsetY       获取鼠标在目标元素上的坐标位置 clientX / clientY       获取鼠标在视口上的坐标位置 pageX / pageY           获取鼠标在页面上的坐标位置 screenX / screenY       获取鼠标在屏幕上的坐标位置 button                  获取按的是哪个鼠标按键， 0：左键； 1:中间键; 2:右键

2.3 键盘事件对象 KeyBorardEvent 的属性和方法

复制

1 2 3

keyCode     获取按键对应的编码值 which       同 keyCode key         获取按键对应的字符值

2.4 所有类型的事件对象都有的属性和方法

复制

1 2 3 4 5

type                获取事件名 timeStamp           获取触发事件时距离打开页面时的毫秒数 target              获取目标元素 stopPropagation()   阻止事件冒泡 preventDefault()    阻止浏览器默认行为

2.5 阻止事件冒泡

在事件的回调函数中执行 event.stopPropagation()，就可以阻止冒泡。

2.6 浏览器的默认行为

① 浏览器有哪些默认行为

复制

1 2 3 4

超链接点击跳转 表单的提交和重置 右键弹出系统菜单 等...

② 阻止浏览器默认行为

在事件的回调函数中调用 event.preventDefault() 即可阻止默认行为。

注意： 如果使用第二种方式监听事件，在回调函数中 return false 同样可以阻止默认行为。

3 事件委托

事件监听到祖先元素上，判断目标元素，如果目标元素满足条件，就执行相关操作。

事件委托的优势：

• 对于给大量的元素监听相同的事件，使用事件委托比遍历挨个监听效率更好。

• 利用事件委托可以让新增的元素也可以响应事件。