常用DOM方法和属性 小结

简介: DOM主要方法 查找节点 element = document.getElementById(id) elements = document.getElementsByTagName(tagName) attributeValue = element.getAttribute(attributeName) booleanValue = element.hasChildNod

DOM主要方法

查找节点

element = document.getElementById(id)

elements = document.getElementsByTagName(tagName)

attributeValue = element.getAttribute(attributeName)

booleanValue = element.hasChildNodes()

创建节点

reference = document.createElement(element)

reference = document.createTextNode(text)

复制节点

reference = node.cloneNode(booleanValue)

插入节点

element.appendChild(newChild)

element.insertBefore(newNode, targetNode)

替换节点

element.replaceChild(newChild, oldChild)

设置节点属性

element.setAttribute(attributeName, attributeValue)

删除节点

element.removeChild(node)

DOM属性

节点属性

nodeName

nodeType

nodeValue

遍历节点树

childNodes

firstChild

lastChild

nextSibling

previousSibling

parentNode

 

 

 

 

 

目录
相关文章
|
5天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
16天前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
5月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`中的`Named Node Map`是元素节点属性的列表,自动更新增删操作。代码示例载入"books.xml",获取第一个`<book>`元素的属性列表,`x.length`显示属性数量,`x.getNamedItem("category").nodeValue`输出"category"属性值,如"cooking",并显示属性总数1。
|
29天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
41 4
|
6天前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
41 0
前端基础(十)_Dom自定义属性(带案例)
|
5月前
|
存储 JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`代表元素的属性列表,当属性增删时会自动更新。示例展示了如何加载"books.xml",获取第一个`<book>`元素的属性。变量`x`存储属性列表,`x.length`显示属性数量,`x.getNamedItem("category")`返回"category"属性值。代码输出属性值"cooking"和属性数量1。
|
1月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
28 0
|
3月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
39 0
|
5月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
38 2