Home>Article>Web Front-end> Super detailed advanced learning of JavaScript DOM technology (organized and shared)
This article brings you relevant knowledge about DOM technology in JavaScript advanced classes. I hope it will be helpful to you.
Document Object Model (DOM) is a standard programming interface recommended by the W3C organization for processing extensible markup language (HTML or XML)
W3C has defined a series of DOM interface, through which the content, structure and style of web pages can be changed.
DOM. All the above content is Seen as anobject
DOM is mainly used to operate elements in our actual development.
How do we get the elements in the page?
You can use the following methods to get the elements in the page:
UsegetElementByld()method to get the element object with ID
doucument.getElementByld('id名')
Useconsole.dir()to print the element object we obtained, more It's good to view the properties and methods in the object.
Example
2019-9-9
Get based ontag name, usegetElementByTagName()The method can return a collection ofobjects with the specified tag name
doucument.getElementsByTagName('标签名');
You can also get all the specified tags inside an element (parent element) based on the tag name The child element of the name does not include the parent element itself when retrieving
element.getElementsByTagName('标签名')ol.getElementsByTagName('li');
Note: the parent element must be asingle object (must specify which element object), does not include the parent when retrieving The element itself
Return a collection of element objects based on the class name
document.getElementsByClassName('Class Name')document.getElementsByClassName('类名');
Return the first element object according to the specified selector
document.querySelector('选择器'); // 切记里面的选择器需要加符号 // 类选择器.box // id选择器 #nav var firstBox = document.querySelector('.box');
Return all element objects according to the specified selector
document.querySelectorAll('选择器');
Note
querySelector The selectors inandquerySelectorAllneed to add thesymbol, for example:document.querySelector('#nav');
Return the body element object
document.body;
Return html element object
document.documentElement;
JavaScript enables us to create dynamics Page, and events are behaviors that can be detected by JavaScript.
Simple understanding: Trigger - response mechanism.
Every element in the web page can generate certain events that can trigger JavaScript. For example, we can generate an event when the user clicks a button, and then perform certain operations.
| Mouse event | Trigger condition |
|---|---|
| onclick | Triggered by left mouse click |
| onmouseover | Triggered by mouse over |
| onmouseout | Mouse leaves trigger |
| onfocus | Get mouse focus trigger |
| onblur | Loss of mouse focus trigger |
| onmousemove | Mouse move trigger |
| onmouseup | Mouse bounce trigger |
| onmousedown | Mouse press trigger |
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
element.innerText
起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行
element.innerHTML
我是文字 123
// img.属性 img.src = "xxx"; input.value = "xxx"; input.type = "xxx"; input.checked = "xxx"; input.selected = true / false; input.disabled = true / false;
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
// element.stylep.style.backgroundColor = 'pink';p.style.width = '250px';
// element.className
注意：
className来操作元素类名属性文本
如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：
element.属性;
element.getAttribute('属性');
element.属性 = '值';
element.setAttribute('属性');
element.removeAttribute('属性');
自定义属性目的：
H5规定自定义属性data-开头作为属性名并赋值
>// 或者使用JavaScript设置p.setAttribute('data-index',1);
element.getAttribute('data-index')element.dataset.index或element.dataset['index']IE11才开始支持获取元素通常使用两种方式：
| 1.利用DOM提供的方法获取元素 | 2.利用节点层级关系获取元素 |
|---|---|
| document.getElementById() | 利用父子兄节点关系获取元素 |
| document.getElementsByTagName() | 逻辑性强，但是兼容性较差 |
| document.querySelector 等 | |
| 逻辑性不强，繁琐 |
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
一般的，节点至少拥有三个基本属性
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
我们在实际开发中，节点操作主要操作的是元素节点
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
node.parentNode
parentNode属性可以返回某节点的父结点，注意是最近的一个父结点我是p
我是span
×
parentNode.childNodes(标准)
parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合childNodesparentNode.children(非标准)
parentNode.children是一个只读属性，返回所有的子元素节点parentNode.firstChild
firstChild返回第一个子节点，找不到则返回nullparentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
parentNode.firstElementChild
firstElementChild返回第一个子节点，找不到则返回nullparentNode.lastElementChild
lastElementChild返回最后一个子节点，找不到则返回null实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案
如果想要第一个子元素节点，可以使用parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用
// 数组元素个数减1 就是最后一个元素的索引号parentNode.chilren[parentNode.chilren.length - 1]
示例：
- 我是li1
- 我是li2
- 我是li3
- 我是li4
node.nextSibling
nextSibling返回当前元素的下一个兄弟元素节点，找不到则返回nullnode.previousSibling
previousSibling返回当前元素上一个兄弟元素节点，找不到则返回null
同样，也是包含所有的节点
node.nextElementSibling
nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回nullnode.previousElementSibling
previousElementSibling返回当前元素上一个兄弟元素节点，找不到则返回null示例
我是p
我是span
如何解决兼容性问题 ？
答：自己封装一个兼容性的函数
function getNextElementSibling(element) { var el = element; while(el = el.nextSibling) { if(el.nodeType === 1){ return el; } } return null;}
document.createElement('tagName');
document.createElement()方法创建由 tagName 指定的HTML 元素node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。node.insertBefore(child,指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。示例
node.removeChild(child)
node.removeChild()方法从 DOM 中删除一个子节点，返回删除的节点node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点示例
三种动态创建元素的区别
区别：
document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘innerHTML是将内容写入某个 DOM 节点，不会导致页面全部重绘innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂createElement()创建多个元素效率稍低一点点，但是结构更清晰总结：不同浏览器下， innerHTML 效率要比 createElement 高
对于DOM操作，我们主要针对子元素的操作，主要有
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
| 传统注册方式 | 方法监听注册方式 |
|---|---|
| 利用 on 开头的事件 onclick | w3c 标准推荐方式 |
|
addEventListener() 它是一个方法 |
| btn.onclick = function() {} | IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替 |
| 特点：注册事件的唯一性 | 特点：同一个元素同一个事件可以注册多个监听器 |
| 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 | 按注册顺序依次执行 |
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上eventTarget.addEventListener(type,listener[,useCapture])
该方法接收三个参数：
type:事件类型字符串，比如click,mouseover,注意这里不要带onlistener：事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上eventTarget.attachEvent(eventNameWithOn,callback)
该方法接收两个参数：
eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 oncallback： 事件处理函数，当目标触发事件时回调函数被调用兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器
function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; }
eventTarget.removeEventListener(type,listener[,useCapture]);
该方法接收三个参数：
type:事件类型字符串，比如click,mouseover,注意这里不要带onlistener：事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习eventTarget.detachEvent(eventNameWithOn,callback);
该方法接收两个参数：
eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 oncallback： 事件处理函数，当目标触发事件时回调函数被调用eventTarget.onclick = null;
事件删除示例：
1
2
3
function removeEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 removeEventListener 方法 if (element.removeEventListener) { element.removeEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; }
事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
加深理解：
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
两个盒子嵌套，一个父盒子一个子盒子，我们的需求是当点击父盒子时弹出 father ，当点击子盒子时弹出 son
son盒子
但是因为DOM流的影响，我们点击子盒子，会先弹出 father，之后再弹出 son
这是因为捕获阶段由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收
document -> html -> body -> father -> son
先看 document 的事件，没有；再看 html 的事件，没有；再看 body 的事件，没有；再看 father 的事件，有就先执行；再看 son 的事件，再执行。
son盒子
我们点击子盒子，会弹出 son、father、document
这是因为冒泡阶段开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点
JS 代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false (不写默认就是false),表示在事件冒泡阶段调用事件处理程序
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
eventTarget.onclick = function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt } eventTarget.addEventListener('click', function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt })
123
事件对象本身的获取存在兼容问题：
解决：
e = e || window.event;
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
| e.type | 返回事件的类型 比如clickmouseover不带on |
| e.cancelBubble | 该属性阻止冒泡，非标准，ie6-8使用 |
| e.returnValue | 该属性阻止默认行为 非标准，ie6-8使用 |
| e.preventDefault() | 该方法阻止默认行为 标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
e.target和this的区别：
123
百度
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。
e.stopPropagation();
e.cancelBubble = true;
son儿子
if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; }
e.target 与 this 的区别
this是事件绑定的元素，这个函数的调用者(绑定这个事件的元素)e.target是事件触发的元素123
事件对象本身的获取存在兼容问题：
window.event中获取查找解决方案
e = e || window.event123
以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单selectstart禁止鼠标选中我是一段不愿意分享的文字
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX（重点） | 返回鼠标相对于文档页面的X坐标 IE9+ 支持 |
| e.pageY（重点） | 返回鼠标相对于文档页面的Y坐标 IE9+ 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头等 |
onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键值的ASCII值 |
onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值相关推荐：javascript学习教程
The above is the detailed content of Super detailed advanced learning of JavaScript DOM technology (organized and shared). For more information, please follow other related articles on the PHP Chinese website!