常用 DOM 函数和属性

函数

document.createElement(nodeName)
document.createTextNode(text) // 创建文本节点
parent.appendChild(child)
parent.insertBefore(newElement, targetElement)

parentNode.removeChild(childNode);

parentNode.replaceChild(newChild, oldChild);

getElementById(elemID)
getElementsByTagName(tag)
getElementsByClassName(class)

属性

获取和设置属性

getAttribute(attribute)
setAttribute(attribute, value)

操作节点

element.parentNode // 父节点
element.childNodes // 所有子节点
node.firstChild // == node.childNodes[0]
node.lastChild // == node.childNodes[node.childNodes.length - 1]
element.nextSibling // 兄弟节点
node.nodeType // 节点属性

nodeType 属性共有12种可取值,其中仅有3种有实用价值:

  • nodeType = 1 元素节点
  • nodeType = 2 属性节点
  • nodeType = 3 文本节点
node.nodeValue // 用于改变文本节点的值

CSS-DOM

element.style.property
element.className

参考文献

  • 《JavaScript DOM 编程艺术(第2版)》, 人民邮电出版社, 2011年4月第1版
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,112评论 0 7
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 5,370评论 1 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,862评论 0 44
  • 2.4.1 比较操作符 如果想比较两个值是否相等,可以使用等于(==)比较操作符。如果在条件语句的某个条件里使用了...
    飞鱼YE阅读 2,732评论 0 0
  • 第一章 1.什么是DOM DOM: Document Object Model(文档对象模型) 是JavaScri...
    fastwe阅读 4,251评论 0 0

友情链接更多精彩内容