HTML DOM Document 对象 Element 对象node属性appendChild() 方法 insertBefore() 方法removeChild() 方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38230811/article/details/83784328

HTML DOM Document 对象

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

Element 对象

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点（参见下一节）。

常用属性和方法

下面的属性和方法可用于所有 HTML 元素上：

属性 / 方法	描述
element.getAttribute()	返回元素节点的指定属性值。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.id	设置或返回元素的 id。
element.removeAttribute()	从元素中移除指定属性。
element.setAttribute()	把指定属性设置或更改为指定值。
nodelist.length	返回 NodeList 中的节点数。

 

node属性

nodeType 属性

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

nodeName 属性

如果节点是一个元素节点 , nodeName 属性将返回标签名。

如果节点是一个属性节点， nodeName 属性将返回属性名

nodeValue 属性

nodeValue 属性设置或返回指定节点的节点值。

appendChild() 方法

定义和用法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

在线使用

 

 insertBefore() 方法

定义和用法

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。

您也可以使用 insertBefore 方法插入/移动已有元素。

把一个列表项从一个列表移动到另一个中：

var node=document.getElementById("myList2").lastChild;

var list=document.getElementById("myList1");

list.insertBefore(node,list.childNodes[0]);

 

在线使用

removeChild() 方法

定义和用法

removeChild() 方法指定元素的某个指定的子节点。

以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

实例

从列表中删除一个项目：

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

在线使用

replaceChild() 方法

定义和用法

replaceChild() 方法用新节点替换某个子节点。

这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

实例

用一个新项目替换列表中的某个项目：

document.getElementById("myList").replaceChild(newnode,oldnode);

在线使用