作者:Milos Protic
译者:前端小智
来源:impressivewebs.
个人专栏 ES6 深入浅出已上线,深入ES6 ,通过案例学习掌握 ES6 中新特性一些使用技巧及原理,持续更新中,←点击可订阅。
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM API非常庞大,在本文中,咱们只讨论比较常用有有用的那些API。
document.querySelector
/ document.querySelectorAll
document.querySelector
方法返回文档中与指定选择器或选择器组匹配的第一个 html
元素。 如果找不到匹配项,则返回null
。
document.querySelectorAll
方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList
。
// 返回第一个 ul 元素
const list = document.querySelector('ul')
// 返回所有类名为 info 或者 warning 的 div 元素
const elements = document.querySelectorAll('div.info, div.warning');
document.createElement
在一个 HTML 文档中, Document.createElement(tagName)
方法创建由 tagName
指定的 HTML 元素,或一个HTMLUnknownElement
,如果tagName
不被识别。
Node.appendChild
Node.appendChild()
方法将节点添加到给定父节点的子节点列表的末尾。 请注意,如果给定的子代是文档中现有节点的引用,则它将移动到新位置。看看示例:
let list = document.createElement('ul');
['北京', '上海', '深圳'].forEach(city => {
let listItem = document.createElement('li')
listItem.innerText = city
list.appendChild(listItem)
})
document.body.appendChild(list)
Node.insertBefore
此方法在给定的父节点内的子引用节点之前插入给定节点(并返回插入的节点)
伪代码如下所示:
- 北京
- 上海
- 深圳
- ↓
Node.insertBefore('厦门','北京')
- ↓
- 厦门
- 北京
- 上海
- 深圳
let list = document.querySelector('ul');
let firstCity = list.querySelector('ul > li');
let newCity = document.createElement('li');
newCity.textContent = 'San Francisco';
list.insertBefore(newCity, firstCity);
Node.removeChild
Node.removeChild
方法从DOM中删除一个子节点并返回删除的节点。 请注意,返回的节点不再是DOM的一部分,而是仍存在于内存中。 如果处理不当,可能会导致内存泄漏。
let list = document.querySelector('ul');
let firstItem = list.querySelector('li');
let removedItem = list.removeChild(firstItem);
Node.replaceChild
此方法替换父节点中的子节点(并返回替换后的旧子节点)。请注意,如果处理不当,此方法可能导致与Node.removeChild
类似的内存泄漏问题。
let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = '前端小智';
let replacedItem = list.replaceChild(newItem, oldItem);
Node.cloneNode
Node.cloneNode(deep)
方法返回调用该方法的节点的一个副本,deep(可选)表示是否采用深度克隆,如果为true
,则该节点的所有后代节点也都会被克隆,如果为false
,则只克隆该节点本身.
let list = document.querySelector('ul');
let clone = list.cloneNode();
Element.getAttribute / Element.setAttribute
Element.getAttribute
方法返回元素上给定属性的值,反之亦然,Element.setAttribute
设置给定元素上属性的值。
let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // outputs my-list
Element.hasAttribute / Element.removeAttribute
Element.hasAttribute
方法检查给定元素是否具有指定的属性,返回值为boolean
。 通过调用Element.removeAttribute
方法,我们可以从元素中删除具有给定名称的属性。
let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
console.log('list has an id');
list.removeAttribute('id');
};
Element.insertAdjacentHTML
element.insertAdjacentHTML(position, text)
将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接innerHTML操作更快。
position
是相对于元素的位置,并且必须是以下字符串之一:
beforebegin:元素自身的前面。
afterbegin:插入元素内部的第一个子节点之前。
beforeend:插入元素内部的最后一个子节点之后。
afterend:元素自身的后面。
text
是要被解析为HTML或XML,并插入到DOM树中的字符串。
<!-- beforebegin -->
<div>
<!-- afterbegin -->
<p>Hello World</p>
<!-- beforeend -->
</div>
<!-- afterend -->
示例:
var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');
总结
希望本文对你有所帮助,并且有助于你理解DOM。正确处理DOM树非常重要,如果操作不正确,可能会导致严重后果。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://www.impressivewebs.co...
交流(欢迎加入群,群工作日都会发红包,互动讨论技术)
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
https://github.com/qq44924588...
因为篇幅的限制,今天的分享只到这里。如果大家想了解更多的内容的话,可以去扫一扫每篇文章最下面的二维码,然后关注咱们的微信公众号,了解更多的资讯和有价值的内容。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。