Js DOM操作相关知识点

JavaScript 中的所有节点类型都继承自 Node 类型(基类型),所有节点类型都共享着相同的基本属性和方法。

if (someNode.nodeType == 1){ // 适用于所有浏览器
alert("Node is an element.");
}

常用的节点类型
元素节点 1
属性节点 2
文本节点 3
someNode.nodeName为大写的标签名。
nodeName 中保存的始终都是元素的标签名,而 nodeValue 的值则始终为 null 。
文档属性
每个节点都有一个 childNodes 属性保存着一个 NodeList 对象。
每个节点都有一个 parentNode 属性,该属性指向文档树中的父节点。
每个节点的 previousSibling 和 nextSibling 属性,每个节点相互之间都是同胞节点。
父节点的firstChild 和 lastChild 属性分别指向其 childNodes 列表中的第一个和最后一个节点。
nodeName
nodeValue
previousSibling 紧邻的上一个同胞元素
nextSibling 紧邻的下一个同胞元素
childeNodes (保存的是个伪数组)
firstChild第一个子节点
NextChild 最后一个子节点。
some.childeNodes[0] === some.firstChild;
文档节点就是整个文档的根节点,在html文字中,文档节点只有一个子节点即<html>. ownerDocument ,该属性指向表示整个文档的文档节点。

文档操作
appendChild someNode.appendChild(newNode)想子节点末尾添加一个节点,返回插入的节点。如果传入到 appendChild() 中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置 转移到新位置。
insertBefore() 方法。这个方法接受两个参数:要插入的节点和作为参照的节点。如果参照节点是 null ,则 insertBefore() 与 appendChild() 执行相同的操作,返回插入的节点。
replaceChild() 方法接受的两个参数是: 要插入的节点和要替换的节点。 要替换的节点将由这个 方法返回并从文档树中被移除。 replaceChild() 插入一个节点时,该节点的所有关系指针都会从被它替换的节点复制过 来。尽管从技术上讲,被替换的节点仍然还在文档中,但它在文档中已经没有了自己的位置。
removeChild() 方法。这个方法接受一个参数,即要移除 的节点。被移除的节点将成为方法的返回值。
cloneNode() 方法接受一个布尔值参数, true执行深复制,也就是复制节点及其整个子节点树;false执行浅复制, 即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。appendChild() 、 insertBefore() 或 replaceChild() 将它添加到文档中。
normalize() , 这个方法唯一的作用就是处理文档树中的文本节点。

document类型
document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性.
document节点一般拥有如下子节点:
DocumentType 文档类型节点 —— 即文档顶部的文档类型声明标签。如:<!DOCTYPE HTML>
Element 元素节点 —— 在浏览器中,即<html>...</html>
Comment 注释节点 —— 即注释(出现在<html>...</html>外部的注释)。
document子节点的访问:
document继承了node类型的属性和方法,可以使用node中的方法访问。
document.doctype —— 访问文档类型声明标签。
document.documentElement —— 访问文档中的<html>...</html>元素。
扩展:document.body直接指向html中的body和head元素。
document文档信息:
document.title —— 文档(页面)标题。
document.URL —— 文档(页面)完整的URL,只读。一般情况下与window.location.href相同。
document.domain —— 文档(页面)的域名。
document.refererer —— 链接到当前文档(页面)的那个页面的URL。
document查找元素(HTMLDocument):
document.getElementById('myId'):获取文档中id属性值为myId的元素。
document.getElementsByTagName('ul'):获取文档中所有的无序列表。返回结果是一个NodeList,不过在HTML中,实际返回的是一个HTMLCollection对象。(HTMLCollection表示元素集合,而NodeList表示节点集合。)
document.getElementsByName('myName'):获取文档中所有name属性值为myName的元素。返回结果同样是一个HTMLCollection对象。
document特殊集合:
这些集合都是HTMLCollection对象,对一些常用元素的访问提供快捷方式。
document.anchors —— 获取文档中所有带name属性的<a></a>元素。
document.links —— 获取文档中所有带href属性的<a></a>元素。
document.images —— 获取文档中所有的<img />元素。
document.write():文档写入
可以使用该方法动态地引入外部资源,例如引入一个JS文件。

Element类型 —— 元素节点
元素节点的nodeType等于1。
元素节点的nodeName等于元素的标签名(大写。与tagName属性返回的值一致)。
所有HTML元素都由HTMLElement或其子类型表示,HTMLElement类型继承自Element类型。
HTMLElement类型设定了id、className、title等基本属性,因而所有HTML元素都支持这些属性。
不同元素所支持的属性有所不同,原因就在于这些元素由更具体的子类型来表示和实现,而非全部采用HTMLElement类型,比如<button></button>元素由HTMLButtonElement来表示。不过,HTMLElement提供的公共属性对任何元素而言都是不会变的。
对于任何元素的任何属性(包括自定义属性),我们都可以通过getAttribute()、setAttribute()、removeAttribute()这三个DOM方法进行属性访问、属性设置(新增+更改)、属性删除的操作。
元素节点还拥有一个attributes属性,其值是一个NamedNodeMap对象,类似NodeList。这个attributes包含了某个HTML元素所有的属性信息。
使用document.createElement()可以创建新元素。如:
var newDiv = document.createElement('div');
var newDivIE = document.createElement('<div id=\'myNewDiv\' class=\'box\'></div>'); //除了上面的规范方法,IE还支持这种方式创建新元素
新创建的元素需要使用appendChild()、insertBefore()等方法手动添加到DOM树中。
元素的子节点,即someElementNode.childNodes中保存着该元素所有的子节点,这些子节点可能是元素、文本、注释等,在实际操作前最好通过nodeType属性进行检查。

Text类型 —— 文本节点
文本节点的nodeType等于3.
文本节点的nodeName等于'#text'。
文本节点的nodeValue即为包含的文本内容。
文本节点的父节点是元素节点,没有子节点。
文本节点拥有一个length属性,表示该文本中的字符数。
空格也会生成文本节点。
文本节点的创建:document.createTextNode('文本内容')。
浏览器在解析文档时永远不会创建相邻的文本节点,也就是说默认情况下,一个元素节点下最多只能有一个文本节点。
在手动执行某些DOM操作的时候下,会出现多个互为同胞的文本节点,这容易导致混乱。
规范化文本节点:element.normalize()。作用就是将某个元素内的所有相邻文本节点合并为同一个文本节点。normalize()方法由Node类型实现和提供,因此可全局使用。
分割文本节点:var txt = textNode.splitText(3)。分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。
appendData(text) :将 text 添加到节点的末尾。
deleteData(offset, count) :从 offset 指定的位置开始删除 count 个字符。
insertData(offset, text) :在 offset 指定的位置插入 text 。
replaceData(offset, count, text) : 用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
splitText(offset) :从 offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count) :提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
除了这些方法之外,文本节点还有一个 length 属性,保存着节点中字符的数目。而且,nodeValue.length 和 data.length 中也保存着同样的值。

转自 https://www.rewong.com/

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值