JavaScript学习笔记(六)-----脚本化文档

原创 走在风中的男子 随笔 学习笔记 194阅读 2017-05-05 23:36:52 举报
DOM概念

文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API。
HTML文档的树状表示

1
在一个节点上的直接节点是父节点 → 在其下一层的直接节点是其子节点
在同一层上具有相同父节点的节点是兄弟节点
在一个节点之下的所有层级的节点是后代节点
注意:通用的Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格的区别的
Document类型:代表一个HTML或XML文档。Element类型:代表该文档中的一个元素
HTMLDocument和HTMLElement子类只是针对于HTML文档和元素

作为节点数的文档

Document对象、Element对象和文档中表示的Text对象都是Node对象

parentNode:节点的父节点
childNodes:只读的类数值对象(NodeList对象),该节点是子节点实时表示
firstChild、lastChild:子节点中的第一个和最后一个节点
nextSibling、previoursSibling:兄弟节点中的前一个和后一个节点。两个属性将节点之间以双向链表的形式链接起来
nodeType:节点类型。9表示Document节点,1代表Element节点、3代表Text节点,8代表Coment节点、11代表DocumentFragment节点
nodeValue:Text节点或Comment节点的文本内容
nodeName:元素的标签名,以大写形式表示
例子

作为元素树的文档

将文档看做是Element对象树,忽略部分文档:Text和Comment节点

API第一部分:Element对象的children属性
children列表包含Element对象,该属性不能访问Text和Coment节点
例子

API第二部分
firstElementChild、lastElementChild:只代表子Element。
nextElementSibling、previousElementSibling:代表兄弟Element。
childElementCount:子元素的数量。

获取和设置非标准HTML属性

HTMLElement和其子类型定义的属性
[quote]getAttribute(): 方法返回指定属性名的属性值,不返回数值、布尔值和对象。
语法:element.getAttribute(attributename)
setAttribute():方法添加指定的属性,并为其赋指定的值。
语法:element.setAttribute(attributename,attributevalue)
hasAttribute():如果存在指定属性,则 hasAttribute() 方法返回 true,否则返回 false。
语法:element.hasAttribute(attributename)
removeAttribute():方法删除指定的属性。
语法:element.removeAttribute(attributename)[/quote]

操作XML命名空间文档属性
[quote]getAttributeNS():方法通过命名空间 URI 和名称来获取属性值。
语法:elementNode.getAttributeNS(ns,name)
setAttributeNS():方法创建或改变具有命名空间的属性。
语法:elementNode.setAttributeNS(name,value)
hasAttributeNS():如果属性由指定的命名空间和名称组成,则 hasAttributeNS() 方法返回 true,否则返回 false。
语法:hasAttributeNS(ns,name)
removeAttributeNS(): 方法删除由命名空间和名称指定的属性。
语法:elementNode.removeAttributeNS(ns,name)[/quote]

数据集属性

dataset属性:允许我们访问所有在元素上自定义的data属性 (这种属性一般以data-开头). 它的结构是一个DOMString映射表,对每一个自定义的数据属性都有一个实体与之对应。

自定义的data 属性名称转化成 DOMStringMap 的键值时会遵循下面的规则:
前缀 data- 被去除(包括减号)
对于每个在ASCII小写字母 a到 z前面的减号 (U+002D),减号会被去除,并且字母会转变成对应的大写字母
其他字符(包含其他减号)都不发生变化

与此相反的转换,即将键值转换为一个属性的名称,会遵循下面的规则:
约束:减号在转变前一定不能紧跟一个ASCII小写字母 a 到 z之间
添加 data- 前缀
任何ASCII大写字母 A 到 Z 将转化成一个减号紧跟对应的小写字母
其他字符不会发生变化
请右键查看元素属性

作为Attr节点的属性

attributes属性:针对非Element对象的任何及诶单,该属性为null。只读类数组对象,代表元素的所有属性,可以使用数字索引访问。
语法:node.attributes
例子

作为HTML的元素内容

outerHTML属性:返回HTML或XML标记的字符串包含被查询元素的开头和结尾标签
例子

insertAdjacentHTML()方法:将任意的HTML标记字符串插入到指定的元素相邻位置。
第一个参数position是相对于元素的位置,并且必须是以下字符串之一:
'beforebegin'
元素自身的前面。
'afterbegin'
插入元素内部的第一个子节点之前。
'beforeend'
插入元素内部的最后一个子节点之后。
'afterend'
元素自身的后面。
insertAdjacentHTML()

使用DocumentFragment

DocumentFragment属性:独立的,不是任何其他文档的一部分。parentNode总为null。
注意:DocumentFragment的特殊之处在于它使得一组节点被当做一个节点看待。如果用方法传递一个DocumentFragment,其实是将该文档片段的所有子节点插入到文档中,而非片段本身。
createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。
语法:document.createDocumentFragment()
实例参考转至菜鸟学院

可编辑区域的内容

execCommand属性
定义:当一个HTML文档切换到设计模式(designMode)时,文档对象暴露 execCommand方法,该方法允许运行命令来操纵可编辑区域的内容。
大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。
语法:bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
命令:
bold
开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 <strong>标签,而不是<b>标签。
subscript
在光标插入点开启或关闭下角标。
justifyCenter
对光标插入位置或者所选内容进行文字居中。
insertImage
在插入点插入一张图片(删除选中的部分)。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以(IE会创建一个链接其值为null)
更多命令请查看
例子

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复