JS回归基础之DOM 

1. 节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记。每个节点都拥有各自的特点、数据和方法。

1.1 Node类型

DOM1 级 定义了一个 Node 接口,该接口将由 DOM 中的所有节点类型实现。
每个节点都有一个 nodeType 属性,表示节点类型,节点类型由在 Node 类型中定义的下列
12 个数值常量来表示,如下所示:

  • Node.ELEMENT_NODE(1)
  • Node.ATTRIBUTE_NODE(2)
  • Node.TEXT_NODE(3)
  • Node.CDATA_SECTION_NODE(4)
  • Node.ENTITY_REFERENCE_NODE(5)
  • Node.ENTITY_NODE(6)
  • Node.PROCESSING_INSTRUCTION_NODE(7)
  • Node.COMMENT_NODE(8)
  • Node.DOCUMENT_NODE(9)
  • Node.DOCUMENT_TYPE_NODE(10)
  • Node.DOCUMENT_FRAGMENT_NODE(11)
  • Node.NOTATION_NODE(12)

1.1.1 nodeName 和 nodeValue 属性

1.1.2 节点关系

  • childNodes: 获取子节点,保存着一个 NodeList 对象,是一个类数组对象。
    对 arguments 对象使用 Array.prototype.slice()方法可以将其转换为数组。而采用同样的方法,也可以将 NodeList 对象转换为数组:
//在 IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
  • parentNode:获取父节点
  • previousSibling:获取上一个节点
  • nextSibling:获取下一个节点
  • ownerDocument: 整个文档的文档节点
  • hasChildNodes(): 方法,包含子节点返回ture
    在这里插入图片描述

1.1.3 操作节点

  • appendChild()
  • insertBefore()
  • replaceChild()
  • removeChild()
  • cloneNode(): 复制节点
  • normalize()

1.2 Document类型

Document 节点具有下列特征:

  • nodeType 的值为 9;
  • nodeName 的值为"#document";
  • nodeValue 的值为 null;
  • parentNode 的值为 null;
  • ownerDocument 的值为 null;
  • 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment。

1.2.1 文档的子节点

  • document.documentElement:取得对<html>的引用
  • document.body:取得对<body>的引用
  • document.doctype:取得对<!DOCTYPE>的引用

1.2.2 文档信息

  • document.title: 文档标题
  • document.URL:取得完整的 URL
  • document.domain:取得域名
  • document.referrer:取得来源页面的 URL

1.2.3 查找元素

  • getElementById()
  • getElementsByTagName()
  • getElementsByName()

1.2.4 特殊集合

  • document.anchors:包含文档中所有带 name 特性的<a>元素;
  • document.applets:包含文档中所有的<applet>元素
  • document.forms:包含文档中所有的<form>元素
  • document.images:包含文档中所有的<img>元素
  • document.links:包含文档中所有带 href 特性的<a>元素

1.2.5 文档写入

  • write()
  • writeln()
  • open()
  • close()

1.3 Element类型

Element 节点具有以下特征:

  • nodeType 的值为 1
  • nodeName 的值为元素的标签名
  • nodeValue 的值为 null
  • parentNode 可能是 Document 或 Element
  • 其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或
    EntityReference

1.3.1 HTML 元素

每个 HTML元素中都存在的下列标准特性:

  • id: 元素在文档中的唯一标识符
  • title: 有关元素的附加说明信息,鼠标放上去显示。
  • lang:元素内容的语言代码,很少使用。
  • dir:语言的方向
  • className:与元素的class 特性对应,即为元素指定的CSS类。

1.3.2 取得特性

getAttribute()

div.id
div.getAttribute("id")

根据H5规范,自定义特性应该加上data- 前缀以便验证,由于style和onclick特性,只有在取得自定义特性时,才会使用getAttribute()方法。

1.3.3 设置特性

setAttribute(“mycolor”, “red”)
removeAttribute(“mycolor”)

1.3.4 attributes 属性

attributes 属性中包含一个NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。

1.3.5 创建元素

 document.createElement("div")

1.3.6 元素的子节点

1.4 Text类型

Text 节点具有以下特征:

  • nodeType 的值为 3;
  • nodeName 的值为"#text";
  • nodeValue 的值为节点所包含的文本;
  • parentNode 是一个 Element;
  • 不支持(没有)子节点。

1.4.1 创建创建文本节点

document.createTextNode()

1.4.2 规范化文本节点

normalize()方法

1.4.3 分割文本节点

splitText()

1.5 Comment类型

Comment 节点具有下列特征:

  • nodeType 的值为 8;
  • nodeName 的值为"#comment";
  • nodeValue 的值是注释的内容;
  • parentNode 可能是 Document 或 Element;
  • 不支持(没有)子节点。

document.createComment()创建注释节点

1.6 CDATASection类型

CDATASection 类型只针对基于 XML 的文档,表示的是 CDATA 区域。
nodeType 的值为 4;

1.7 DocumentType类型

包含着与文档的 doctype 有关的所有信息,nodeType 的值为 10;

1.8 DocumentFragment类型

nodeType 的值为 11;

1.9 Attr类型

元素的特性在 DOM 中以 Attr 类型来表示,nodeType 的值为 2;

2. DOM扩展

对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5。

2.1 选择符 API

  1. querySelector()
  2. querySelectorAll()
  3. matchesSelector()

2.2 元素遍历

  1. childElementCount:返回子元素(不包括文本节点和注释)的个数;
  2. firstElementChild:指向第一个子元素;firstChild 的元素版;
  3. lastElementChild:指向最后一个子元素;lastChild 的元素版;
  4. previousElementSibling:指向前一个同辈元素;previousSibling 的元素版;
  5. nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
    解决了空白文本节点的问题。

2.3 HTML5

2.3.1 与类相关的扩充

  1. getElementsByClassName()
  2. classList 属性
     add(value):将给定的字符串值添加到列表中;
     contains(value):表示列表中是否存在给定的值,如果存在则返回 true,否则返回 false;
     remove(value):从列表中删除给定的字符串;
     toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
//删除"disabled"类
div.classList.remove("disabled"); 
//添加"current"类
div.classList.add("current"); 
//切换"user"类
div.classList.toggle("user"); 
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
 //执行操作
)

2.3.2 焦点管理

document.activeElement 属性:获取DOM 中当前获得了焦点的元素。
**document.hasFocus()**方法:确定文档是否获得了焦点

2.3.3 HTMLDocument的变化

  1. readyState 属性
     loading:正在加载文档;
     complete:已经加载完文档。
  2. 兼容模式
    compatMode: 渲染模式,
if (document.compatMode == "CSS1Compat"){ 
 alert("Standards mode"); //标准模式
} else { 
 alert("Quirks mode");  //混杂模式
}
  1. head 属性
    document.head:引用文档的<head>元素

2.3.4 字符集属性

document.charset

2.3.5 自定义数据属性

HTML5 规定可以为元素添加非标准的属性,但要添加前缀 data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。

2.3.6 插入标记

  1. innerHTML 属性
  2. outerHTML 属性
  3. insertAdjacentHTML()方法

2.3.7 scrollIntoView()方法

方便开发人员更好地控制页面滚动。

2.4 专有扩展

目前没有成为的 DOM 扩展的标准,成为专有扩展。将来可能会成为标准。说白了就是备胎的意思。

2.4.1 children属性

和childNodes类似,区别是children只获取元素子节点

2.4.2 contains()方法

用来判断某个节点是不是另一个节点的后代

alert(document.documentElement.contains(document.body)); //true

2.4.3 插入文本

innerText 属性
outerText 属性

2.4.5 插入文本

HTML5 在将scrollIntoView()纳入规范之后,仍然还有其他几个专有方法可以在不同的浏览器中使用。

  • scrollIntoViewIfNeeded(alignCenter)
  • scrollByLines(lineCount)
  • scrollByPages(pageCount)

document.defaultView.getComputedStyle(myDiv, null);document.defaultView.getComputedStyle(myDiv, null);

3. DOM2和DOM3

获取元素计算后属性

document.defaultView.getComputedStyle(myDiv, null);
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页