DOM

2019/03/01 21:21
阅读数 10

梳理一下脉络,重新认识一下JavaScript这门语言。

DOM 是Document、Object、Model(文档对象模型)

JavaScript通过ECMAScript编写程序让浏览器来解析,利用ECMAScript通过BOM(Browser Object Model)即浏览器对象模型,来操作浏览器窗口、浏览器导航对象、屏幕分辨率、浏览器历史、cookie等等。通过DOM操作HTML,赋予HTML行为。

是对HTML标签、属性、文本解析后存放在内存中的倒置的树

•树中的标签、属性、文本统称为节点(Node)

•标签称为元素节点(Element)

•属性称为属性节点(Atrribute)

•文本称为文本节点(Text)

•DOM的核心对象为document

节点的关系:父节点、子节点、兄弟节点、前兄弟节点、后兄弟节点、叶子节点、根节点

 

获取文档的根

document.getDocumentElement;//获取HTML元素

document.body;//获取body元素

•Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象

•Document 对象集合

 

集合 描述
all[] 提供对文档中所有HTML元素访问。
anchors[] 返回对文档中所有Anchor对象的引用。
applets 返回对文档对象所有Applet对象的引用。
forms[] 返回对文档中所有Form对象引用。
images[] 返回对文档中所有Image对象引用。
links[] 返回对文档中所有Area和Link对象引用。

document的常用属性

属性

描述

URL

返回当前文档的 URL。
body

提供对 <body> 元素的直接访问。

对于定义了框架集的文档,该属性引用最外层的 <frameset>。

documentElement 返回html dom中的root 节点 即<html>
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。

 

Document 对象方法

方法

描述
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个元素的引用。
getElementsByName() 返回带有指定名称的元素集合。
getElementsByTagName() 返回带有指定标签名的元素集合。
getElementsByClassName() 返回带有指定类样式的元素集合。
open()

打开一个流,以收集来自任何 write() 或 writeln() 方法的输出。

新建文档,覆盖原来的文档内容

write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

 

1、querySelector

根据选择器查找元素,返回单个元素,无论选择器找到的元素有多少,只会返回第一个匹配的元素,如果未找到匹配的元素,则返回null。

2、querySelectorAll

根据选择器查找元素,返回元素集合,无论选择器找到的元素有多少,都会返回元素集合(NodeList),如果未找到匹配的元素,则返回空集合。

 

Element对象

•Element代表页面中的标签元素,如<div><a>

•Element的尺寸属性

属性

描述
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。

 

元素自身属性的操作

属性 / 方法

描述
element.className 设置或返回元素的 class 属性。
element.cloneNode() 克隆元素。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.nodeName 返回元素的名称。可能是元素名,也可能是属性名
element.nodeType 返回元素的节点类型,1元素,2、属性,3、文本。
element.nodeValue 设置或返回元素值。元素节点没有此属性
element.style 设置或返回元素的 style 属性。
element.tabIndex 设置或返回元素的 tab 键控制次序。
element.tagName 返回元素的标签名。,只是元素
element.textContent 设置或返回节点及其后代的文本内容。
element.title 设置或返回元素的 title 属性。

 

Element对象

•属性的操作

属性 / 方法

描述
element.attributes 返回元素属性的 NamedNodeMap。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。
element.setAttribute() 把指定属性设置或更改为指定值。
element.setAttributeNode() 设置或更改指定属性节点。

 

•父及兄弟元素的操作

属性

描述
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.ownerDocument 返回元素的根元素(文档对象)。
element.parentNode 返回元素的父节点。
element.previousSibling 返回位于相同节点树层级的前一个节点。

 

•子元素的操作

属性

描述
element.childNodes 返回元素子节点的 NodeList。
element.firstChild 返回元素的首个子节点
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。
element.lastChild 返回元素的最后一个子节点。
element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.removeChild() 从元素中移除子节点。
element.replaceChild() 替换元素中的子节点。
nodelist.item() 返回 NodeList 中位于指定下标的节点。
nodelist.length 返回 NodeList 中的节点数。

 

创建新的元素

documet.createElement("div");

添加内容

innerHTML = ""

innerText = ""

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部