首页 体育 教育 财经 社会 娱乐 军事 国内 科技 互联网 房产 国际 女人 汽车 游戏

13个需要知道的方法:使用 JavaScript 来操作 DOM

2020-01-04

DOM 或文档目标模型是 web 页面上一切目标的根。它表明文档的结构,并将页面连接到编程言语。它的结构是一个逻辑树。每个分支完毕于一个节点,每个节点包括子节点、目标。DOM API十分巨大,在本文中,咱们只评论比较常用有有用的那些API。

document.querySelector办法回来文档中与指定选择器或选择器组匹配的榜首个 html 元素。 假如找不到匹配项,则回来null。

document.querySelectorAll 办法回来与指定的选择器组匹配的文档中的元素列表 。回来的目标是 NodeList 。

// 回来榜首个 ul 元素 
const list = document.querySelector 
// 回来一切类名为 info 或许 warning 的 div 元素 
const elements = document.querySelectorAll; 

在一个 HTML 文档中, Document.createElement 办法创立由 tagName 指定的 HTML 元素,或一个HTMLUnknownElement,假如tagName不被辨认。

Node.appendChild办法将节点添加到给定父节点的子节点列表的结尾。 请注意,假如给定的子代是文档中现有节点的引证,则它将移动到新方位。看看示例:

let list = document.createElement; 
['北京', '上海', '深圳'].forEach 
 listItem.innerText = city 
 list.appendChild 
}) 
document.body.appendChild 

此办法在给定的父节点内的子引证节点之前刺进给定节点

伪代码如下所示:

Node.insertBefore

let list = document.querySelector; 
let firstCity = list.querySelector; 
let newCity = document.createElement; 
newCity.textContent = 'San Francisco'; 
list.insertBefore; 

Node.removeChild办法从DOM中删去一个子节点并回来删去的节点。 请注意,回来的节点不再是DOM的一部分,而是仍存在于内存中。 假如处理不妥,或许会导致内存走漏。

let list = document.querySelector; 
let firstItem = list.querySelector; 
let removedItem = list.removeChild; 

此办法替换父节点中的子节点。请注意,假如处理不妥,此办法或许导致与Node.removeChild相似的内存走漏问题。

let list = document.querySelector; 
let oldItem = list.querySelector; 
let newItem = document.createElement; 
newItem.innerHTML = '前端小智'; 
let replacedItem = list.replaceChild; 

Node.cloneNode 办法回来调用该办法的节点的一个副本,deep表明是否选用深度克隆,假如为true,则该节点的一切子孙节点也都会被克隆,假如为false,则只克隆该节点本身.

let list = document.querySelector; 
let clone = list.cloneNode; 

Element.getAttribute办法回来元素上给定特点的值,反之亦然,Element.setAttribute设置给定元素上特点的值。

let list = document.querySelector; 
let clone = list.cloneNode; 

Element.hasAttribute办法查看给定元素是否具有指定的特点,回来值为boolean。 经过调用Element.removeAttribute办法,咱们能够从元素中删去具有给定称号的特点。

let list = document.querySelector; 
if ) { 
 console.log; 
 list.removeAttribute; 
}; 

element.insertAdjacentHTML 将指定的文本解析为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; 
list.insertAdjacentHTML('afterbegin', ' li id= first-item First /li  

期望本文对你有所协助,而且有助于你了解DOM。正确处理DOM树十分重要,假如操作不正确,或许会导致严重后果。

热门文章

随机推荐

推荐文章