阿特我自己
[email protected]
Hello WvT
DOM API 基础
DOM API 基础

Web API 基础对象

window 是载入浏览器的标签,使用该对象,可以返回窗口大小、操作载入窗口的文档、存储客户端上文档的特殊数据、为当前窗口绑定 Event Handler 等等

navigator 表示浏览器存在于 web 上的状态和标识。可以用该对象获取地理信息、多媒体流、语言等等

document 是载入窗口的实际页面。通过该对象,可以操作和返回文档中 HTML 和 CSS 的信息,例如获取一个元素的引用,修改其属性、子元素、文本内容、样式等等

DOM 树

DOM 树是一个由浏览器生成的 “树结构” 使编程语言可以更容易地访问 HTML 结构

文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点(Node)

  • 元素节点:存储于 DOM 中的一个元素
  • 根节点:树中的顶层节点,在HTML的情况下,总是一个HTML节点(其他标记语言,如 SVG 和 XML 将有不同的根元素)
  • 子节点:直接位于某个节点内的节点
  • 后代节点:位于某个节点内任意位置的节点
  • 父节点:某节点的父级节点
  • 兄弟节点:DOM树中位于同一等级的节点
  • 文本节点:包含文字串的节点

DOM 的基本操作

选择元素

Document.querySelector() 允许你使用 CSS 选择器选择元素,这是推荐的主流方法

此外,还有以下一些旧的方法

Document.getElementById():选择指定 ID 的元素

Document.getElementByTagName():选择指定标签的元素,返回一个数组

创建并放置节点

通过 Document.createElement(tagName) 方法,可以创建一个新的元素,将会返回一个 HTMLXxxElement 类型的对象,该对象继承自 Element

通过 Document.createTextNode(text) 方法,可以创建一个文本节点,就像是段落标签的文本

现在,通过 Node.appendChild() 方法在节点内追加一个新的节点

移动和删除元素

如果想要移动一个元素,只需要获取该元素的引用,并通过 Node.appendChild() 方法直接重新添加该元素即可

如果想要添加一个元素的副本,可以通过 Node.cloneNode(deep: Boolean) 方法创建该节点的副本,deep 代表是否采用深度克隆,如果为 true,则该节点的所有后代节点也都会被克隆

操作样式

Document.stylesheets 属性返回一个由 StyleSheet 对象组成的 StyleSheetLists 数组,可以获取绑定到文档的所有样式表,然而通过这种方式操作样式过于困难,现在有更容易的方法

第一种方法:通过 HTMLElement.style 属性可以直接设定一个元素的样式
例如:aButton.style.backgroundColor = “black”;

第二种方法:通过设定元素的 class 属性,让 CSS 选择器来设定样式
例如 aButton.setAttribute(“class”, “material-design”)

 

赞赏

发表评论

textsms
account_circle
email

Hello WvT

DOM API 基础
Web API 基础对象 window 是载入浏览器的标签,使用该对象,可以返回窗口大小、操作载入窗口的文档、存储客户端上文档的特殊数据、为当前窗口绑定 Event Handler 等等 navigator 表示…
扫描二维码继续阅读
2019-09-13


没有激活的小工具