# DOM1

最新推荐文章于 2024-09-26 01:42:12 发布

大一的小伙子

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量89

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2301_76815287/article/details/130470835

版权

DOM1

Nodde类型:

DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。
JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

Nodetype类型:

每个节点都有一个 nodeType 属性，用于表明节点的类型。

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

NodeName和NodeValue属性:

对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。

childNodes 属性

_其保存NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

var firstChild = someNode.childNodes[0]; 
var secondChild = someNode.childNodes.item(1); /*也可以通过item来访问*/
var count = someNode.childNodes.length;

previousSibling和 nextSibling 属性

previousSibling属性:

可以访问列表中前一个节点:列表中第一个节点的 previousSibling 属性值为 null

nextSibling 属性

可以访问列表中后一个节点: 列表中最后一个节点的 nextSibling 属性的值同样也为 null

hasChildNodes属性:

hasChildNodes()也是一个非常有用的方法，这个方法在节点包含一或多个子节点的情况下返回 true

ownerDocument属性:

不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

操作节点:

appendChild()方法:

用于向 childNodes 列表的末尾添加一个节点
如果传入到 appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置(新位置是someNode的结尾)

var returnedNode = someNode.appendChild(someNode.firstChild); 
alert(returnedNode == someNode.firstChild); //false 
alert(returnedNode == someNode.lastChild); //true

insertBefore()方法

参数:要插入的节点和作为参照的节点,插入节点后,被插入的的节点会变成参照节点的前一个同胞节点.
提示:如果参照节点是null，则 insertBefore()与 appendChild()执行相同的操作

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null); 
alert(newNode == someNode.lastChild); //true 

//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); 
alert(returnedNode == newNode); //true 
alert(newNode == someNode.firstChild); //true 

//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild); 
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

replaceChild()方法:

参数:要插入的节点和要替换的节点,替换的节点会被移除

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); 
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

removeChild(移除的节点)方法

被移除的节点将成为方法的返回值

cloneNode()方法:

cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为 true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为 false 的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。

<ul> 
	 <li>item 1</li> 
	 <li>item 2</li> 
 	<li>item 3</li> 
</ul>


	var deepList = myList.cloneNode(true); 
	alert(deepList.childNodes.length); //3（IE < 9）或 7（其他浏览器）
	var shallowList = myList.cloneNode(false); 
	alert(shallowList.childNodes.length); //0

__提示:cloneNode()方法不会复制添加到 DOM 节点中的 JavaScript 属性，例如事件处理程序等。

Document类型:

document 对象是 HTMLDocument（继承自 Document 类型）的一个实例
1.nodeType 的值为 9；
2.nodeName 的值为"#document"；
3.nodeValue 的值为 null；
4.parentNode 的值为 null；
5.ownerDocument 的值为 null；
其子节点可能是一个 DocumentType（最多一个）、Element（最多一个)ProcessingInstruction或 Comment。

documentElement属性

var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true 
alert(html === document.firstChild); //true

body

直接指向元素

var body = document.body; //取得对<body>的引用

DocumentType

通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体.

var doctype = document.doctype; //取得对<!DOCTYPE>的引用

title属性:

。通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中

//取得文档标题
var originalTitle = document.title; 
//设置文档标题
document.title = "New page title";

nameItem方法:

使用这个方法可以通过元素的name 特性取得集合中的项。

<img src="myimage.gif" name="myImage">

let image=document.getElementsByTagName("img")
var myImage = images.namedItem("myImage");

getElementsByName()方法:

这个方法会返回带有给定name特性的所有元素。

特殊集合:

document.anchors，包含文档中所有带name特性的<a>元素；\
document.forms，包含文档中所有的<form>元素，document.getElementsByTagName("form")
document.images，包含文档中所有的<img>元素，与document.getElementsByTagName("img")得到的结果相同；
document.links，包含文档中所有带href特性的<a>元素。

文档写入:

write()和writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。
write()会原样写入，而writeln()则会在字符串的末尾添加一个换行符（\n）。

<html> 
<head> 
    <title>document.write() Example</title> 
</head> 
<body> 
    <p>The current date and time is: 
    <script type="text/javascript"> 
        document.write("<strong>" + (new Date()).toString() + "</strong>");     
     <\ /script> 
    </p> 
</body> 
</html>

方法open()和close()分别用于打开和关闭网页的输出流。

Element类型

所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
className，与元素的class特性对应，即为元素指定的CSS类。没有将这个属性命名为class