JavaScript DOM节点属性知识点有哪些

目录

1. DOM简介
2. DOM节点类型
3. DOM节点属性
   • nodeName
   • nodeValue
   • nodeType
   • parentNode
   • childNodes
   • firstChild
   • lastChild
   • previousSibling
   • nextSibling
   • attributes
   • ownerDocument
   • namespaceURI
   • prefix
   • localName
   • textContent
   • innerHTML
   • outerHTML
   • className
   • classList
   • id
   • style
   • tagName
   • dataset
   • hidden
   • title
   • lang
   • dir
   • accessKey
   • tabIndex
   • contentEditable
   • isContentEditable
   • draggable
   • spellcheck
   • offsetParent
   • offsetTop
   • offsetLeft
   • offsetWidth
   • offsetHeight
   • clientTop
   • clientLeft
   • clientWidth
   • clientHeight
   • scrollTop
   • scrollLeft
   • scrollWidth
   • scrollHeight
   • parentElement
   • children
   • firstElementChild
   • lastElementChild
   • previousElementSibling
   • nextElementSibling
   • childElementCount
4. DOM节点方法
   • appendChild
   • insertBefore
   • removeChild
   • replaceChild
   • cloneNode
   • normalize
   • isEqualNode
   • isSameNode
   • compareDocumentPosition
   • contains
   • hasChildNodes
   • getAttribute
   • setAttribute
   • removeAttribute
   • hasAttribute
   • getAttributeNode
   • setAttributeNode
   • removeAttributeNode
   • getElementsByTagName
   • getElementsByClassName
   • querySelector
   • querySelectorAll
   • matches
   • closest
   • insertAdjacentHTML
   • insertAdjacentText
   • insertAdjacentElement
   • scrollIntoView
   • focus
   • blur
   • click
   • dispatchEvent
5. DOM事件
   • 事件类型
   • 事件处理程序
   • 事件对象
   • 事件传播
   • 事件委托
6. DOM操作最佳实践
   • 避免频繁操作DOM
   • 使用文档片段
   • 使用事件委托
   • 使用classList操作类名
   • 使用dataset操作自定义属性
   • 使用querySelector和querySelectorAll
   • 使用textContent代替innerHTML
   • 使用requestAnimationFrame优化动画
7. 总结

DOM简介

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。DOM提供了对文档的结构化表示，并定义了一种方式可以使程序对该结构进行访问和操作。

DOM节点类型

在DOM中，文档中的所有内容都是节点。节点类型包括：

• 元素节点：HTML标签，如<div>、<p>等。
• 文本节点：元素节点中的文本内容。
• 属性节点：元素的属性，如id、class等。
• 注释节点：HTML注释。
• 文档节点：整个文档的根节点。
• 文档类型节点：<!DOCTYPE>声明。

DOM节点属性

nodeName

nodeName属性返回节点的名称。对于元素节点，nodeName返回标签名（大写）；对于文本节点，返回#text；对于注释节点，返回#comment。

const element = document.getElementById('example');
console.log(element.nodeName); // 输出 "DIV"

nodeValue

nodeValue属性返回或设置节点的值。对于文本节点和注释节点，nodeValue返回节点的文本内容；对于元素节点，返回null。

const textNode = document.createTextNode('Hello World');
console.log(textNode.nodeValue); // 输出 "Hello World"

nodeType

nodeType属性返回节点的类型。常见的节点类型有：

• 1：元素节点
• 3：文本节点
• 8：注释节点
• 9：文档节点
• 10：文档类型节点

const element = document.getElementById('example');
console.log(element.nodeType); // 输出 1

parentNode

parentNode属性返回节点的父节点。如果节点没有父节点，返回null。

const element = document.getElementById('example');
console.log(element.parentNode); // 输出父节点

childNodes

childNodes属性返回节点的子节点列表，包括文本节点和注释节点。

const element = document.getElementById('example');
console.log(element.childNodes); // 输出子节点列表

firstChild

firstChild属性返回节点的第一个子节点。如果节点没有子节点，返回null。

const element = document.getElementById('example');
console.log(element.firstChild); // 输出第一个子节点

lastChild

lastChild属性返回节点的最后一个子节点。如果节点没有子节点，返回null。

const element = document.getElementById('example');
console.log(element.lastChild); // 输出最后一个子节点

previousSibling

previousSibling属性返回节点的前一个兄弟节点。如果节点没有前一个兄弟节点，返回null。

const element = document.getElementById('example');
console.log(element.previousSibling); // 输出前一个兄弟节点

nextSibling

nextSibling属性返回节点的下一个兄弟节点。如果节点没有下一个兄弟节点，返回null。

const element = document.getElementById('example');
console.log(element.nextSibling); // 输出下一个兄弟节点

attributes

attributes属性返回节点的属性节点列表。

const element = document.getElementById('example');
console.log(element.attributes); // 输出属性节点列表

ownerDocument

ownerDocument属性返回节点所属的文档对象。

const element = document.getElementById('example');
console.log(element.ownerDocument); // 输出文档对象

namespaceURI

namespaceURI属性返回节点的命名空间URI。对于HTML文档，返回null。

const element = document.getElementById('example');
console.log(element.namespaceURI); // 输出命名空间URI

prefix

prefix属性返回节点的命名空间前缀。对于HTML文档，返回null。

const element = document.getElementById('example');
console.log(element.prefix); // 输出命名空间前缀

localName

localName属性返回节点的本地名称（不包含命名空间前缀）。

const element = document.getElementById('example');
console.log(element.localName); // 输出本地名称

textContent

textContent属性返回或设置节点的文本内容。与innerHTML不同，textContent不会解析HTML标签。

const element = document.getElementById('example');
console.log(element.textContent); // 输出文本内容

innerHTML

innerHTML属性返回或设置节点的HTML内容。与textContent不同，innerHTML会解析HTML标签。

const element = document.getElementById('example');
console.log(element.innerHTML); // 输出HTML内容

outerHTML

outerHTML属性返回或设置节点的HTML内容，包括节点本身。

const element = document.getElementById('example');
console.log(element.outerHTML); // 输出HTML内容，包括节点本身

className

className属性返回或设置节点的class属性值。

const element = document.getElementById('example');
console.log(element.className); // 输出class属性值

classList

classList属性返回节点的class属性值的DOMTokenList对象，提供了添加、删除、切换类名的方法。

const element = document.getElementById('example');
element.classList.add('new-class'); // 添加类名
element.classList.remove('old-class'); // 删除类名
element.classList.toggle('active'); // 切换类名

id

id属性返回或设置节点的id属性值。

const element = document.getElementById('example');
console.log(element.id); // 输出id属性值

style

style属性返回节点的style属性对象，可以通过它设置或获取节点的CSS样式。

const element = document.getElementById('example');
element.style.color = 'red'; // 设置颜色
console.log(element.style.color); // 输出颜色

tagName

tagName属性返回节点的标签名（大写）。

const element = document.getElementById('example');
console.log(element.tagName); // 输出标签名

dataset

dataset属性返回节点的data-*属性集合，可以通过它获取或设置自定义数据属性。

const element = document.getElementById('example');
console.log(element.dataset.customAttribute); // 输出自定义数据属性

hidden

hidden属性返回或设置节点的hidden属性值，用于控制节点的可见性。

const element = document.getElementById('example');
element.hidden = true; // 隐藏节点

title

title属性返回或设置节点的title属性值，通常用于显示提示信息。

const element = document.getElementById('example');
console.log(element.title); // 输出title属性值

lang

lang属性返回或设置节点的lang属性值，用于指定元素的语言。

const element = document.getElementById('example');
console.log(element.lang); // 输出lang属性值

dir

dir属性返回或设置节点的dir属性值，用于指定文本方向（ltr或rtl）。

const element = document.getElementById('example');
console.log(element.dir); // 输出dir属性值

accessKey

accessKey属性返回或设置节点的accesskey属性值，用于指定快捷键。

const element = document.getElementById('example');
console.log(element.accessKey); // 输出accesskey属性值

tabIndex

tabIndex属性返回或设置节点的tabindex属性值，用于控制节点的Tab键顺序。

const element = document.getElementById('example');
console.log(element.tabIndex); // 输出tabindex属性值

contentEditable

contentEditable属性返回或设置节点的contenteditable属性值，用于控制节点是否可编辑。

const element = document.getElementById('example');
element.contentEditable = true; // 使节点可编辑

isContentEditable

isContentEditable属性返回节点是否可编辑。

const element = document.getElementById('example');
console.log(element.isContentEditable); // 输出节点是否可编辑

draggable

draggable属性返回或设置节点的draggable属性值，用于控制节点是否可拖动。

const element = document.getElementById('example');
element.draggable = true; // 使节点可拖动

spellcheck

spellcheck属性返回或设置节点的spellcheck属性值，用于控制节点是否启用拼写检查。

const element = document.getElementById('example');
element.spellcheck = true; // 启用拼写检查

offsetParent

offsetParent属性返回节点的最近的定位祖先元素。

const element = document.getElementById('example');
console.log(element.offsetParent); // 输出最近的定位祖先元素

offsetTop

offsetTop属性返回节点相对于offsetParent的顶部偏移量。

const element = document.getElementById('example');
console.log(element.offsetTop); // 输出顶部偏移量

offsetLeft

offsetLeft属性返回节点相对于offsetParent的左侧偏移量。

const element = document.getElementById('example');
console.log(element.offsetLeft); // 输出左侧偏移量

offsetWidth

offsetWidth属性返回节点的宽度，包括内边距和边框。

const element = document.getElementById('example');
console.log(element.offsetWidth); // 输出宽度

offsetHeight

offsetHeight属性返回节点的高度，包括内边距和边框。

const element = document.getElementById('example');
console.log(element.offsetHeight); // 输出高度

clientTop

clientTop属性返回节点的上边框宽度。

const element = document.getElementById('example');
console.log(element.clientTop); // 输出上边框宽度

clientLeft

clientLeft属性返回节点的左边框宽度。

const element = document.getElementById('example');
console.log(element.clientLeft); // 输出左边框宽度

clientWidth

clientWidth属性返回节点的宽度，包括内边距，但不包括边框和滚动条。

const element = document.getElementById('example');
console.log(element.clientWidth); // 输出宽度

clientHeight

clientHeight属性返回节点的高度，包括内边距，但不包括边框和滚动条。

const element = document.getElementById('example');
console.log(element.clientHeight); // 输出高度

scrollTop

scrollTop属性返回或设置节点的垂直滚动距离。

const element = document.getElementById('example');
console.log(element.scrollTop); // 输出垂直滚动距离

scrollLeft

scrollLeft属性返回或设置节点的水平滚动距离。

const element = document.getElementById('example');
console.log(element.scrollLeft); // 输出水平滚动距离

scrollWidth

scrollWidth属性返回节点的总宽度，包括不可见的部分。

const element = document.getElementById('example');
console.log(element.scrollWidth); // 输出总宽度

scrollHeight

scrollHeight属性返回节点的总高度，包括不可见的部分。

const element = document.getElementById('example');
console.log(element.scrollHeight); // 输出总高度

parentElement

parentElement属性返回节点的父元素节点。如果节点没有父元素节点，返回null。

const element = document.getElementById('example');
console.log(element.parentElement); // 输出父元素节点

children

children属性返回节点的子元素节点列表，不包括文本节点和注释节点。

const element = document.getElementById('example');
console.log(element.children); // 输出子元素节点列表

firstElementChild

firstElementChild属性返回节点的第一个子元素节点。如果节点没有子元素节点，返回null。

const element = document.getElementById('example');
console.log(element.firstElementChild); // 输出第一个子元素节点

lastElementChild

lastElementChild属性返回节点的最后一个子元素节点。如果节点没有子元素节点，返回null。

const element = document.getElementById('example');
console.log(element.lastElementChild); // 输出最后一个子元素节点

previousElementSibling

previousElementSibling属性返回节点的前一个兄弟元素节点。如果节点没有前一个兄弟元素节点，返回null。

const element = document.getElementById('example');
console.log(element.previousElementSibling); // 输出前一个兄弟元素节点

nextElementSibling

nextElementSibling属性返回节点的下一个兄弟元素节点。如果节点没有下一个兄弟元素节点，返回null。

const element = document.getElementById('example');
console.log(element.nextElementSibling); // 输出下一个兄弟元素节点

childElementCount

childElementCount属性返回节点的子元素节点数量。

const element = document.getElementById('example');
console.log(element.childElementCount); // 输出子元素节点数量

DOM节点方法

appendChild

appendChild方法将一个节点添加到指定节点的子节点列表末尾。

const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);

insertBefore

insertBefore方法将一个节点插入到指定节点的子节点列表中的指定位置。

const parent = document.getElementById('parent');
const child = document.createElement('div');
const referenceNode = parent.firstChild;
parent.insertBefore(child, referenceNode);

removeChild

removeChild方法从指定节点的子节点列表中移除一个节点。

”`javascript const parent = document.getElementById(‘parent’); const child = parent