javascript学习——节点层次

最新推荐文章于 2021-09-06 19:37:28 发布

lizzvia

最新推荐文章于 2021-09-06 19:37:28 发布

阅读量334

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u013237862/article/details/51480205

版权

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Node类型：是javascript所有节点的父类，所有节点类型都共享着相同的基本类型和方法。

节点属性nodeType：

1. Node.ELEMENT_NODE(1)
2. Node.ATTRIBUTE_NODE(2)
3. Node.TEXT_NODE(3)
4. Node.CDATA_SECTION_NODE(4)
5. Node.ENTITY_REFERENCE_NODE(5)
6. Node.ENTITY_NODE(6)
7. Node.PROCESSING_INSTRUCTION_NODE(7)
8. Node.COMMENT_NODE(8)
9. Node.DOCUMENT_NODE(9)
10. Node.DOCUMENT_TYPE_NODE(10)
11. Node.DOCUMENT_FRAGMENT_NODE(11)
12. Node.NOTATION_NODE(12)
注：在进行nodeType类型比较的时候，为了兼容性的考虑，建议使用数字值。

节点名称nodeName：保存的是节点的标签名

节点关系：树状结构。

1. parentNode：指向父节点
2. childNodes：是一个nodeList对象，类似于动态数组，包含着该节点的全部子节点。length表示子节点的个数，如果要访问各个子节点，可以通过item(pos)方法，也可以通过childNodes[i]方法来访问
3. nextSibling：同胞节点，在节点右边
4. previousSibling：同胞节点，在节点左边
5. ownerDocument：指向该文档的文档节点。

操作节点：节点的增删改查

1. appendChild():将目标节点添加到childNodes的尾部，结果将返回新增节点。
```
var returnNode = someNode.appendChild(SomeNode2.firstChild);
```
2. insertBefore(node,node2): 参数为要插入的节点和作为参照的节点，将目标节点插入到参照节点的前面。操作完成之后，node1成为node2的previousSibling.
```
var returnNode = SomeNode.insertBefore(newNode,SomeNode.firstChild);
```
3. replaceChild():要插入的节点和药替换的节点，操作完成之后，被替换的节点将从文档树种移除，同时由要插入的节点占据位置。
```
var returnNode = SomeNode.replaceChild(newNode,SomeNode.firstChild);
```

Document类型：表示整个HTML页面，document对象是window对象的一个属性。特征有：

nodeType：9
nodeName：‘#document’
nodeValue：null
parentNode：null
ownerDocument ：null
子节点可以是：DocumentType、Element、ProcessingInstruction、Coment。

注：所有浏览器访问html、body、doctype可以直接使用document的属性来访问。

var html = document.documentElement;
var body = document.body;
var doc = document.doctype;

文档信息：可以获取document对象所表现的一些网页信息。

var title = document.title;//获取页面标题

//与网页请求相关
var url = document.URL;
var domain = document.domain;
var referrer = document.referrer;

注：URL属性包括页面完整的URL，domain属性是页面的域名。referrer是链接到当前页面的URL。也就是说 URL = domain+referrer

查找元素：两个方法getElementById()、getElementByTagName().

getElementById():参数为需要取得的元素id。大小写区别严格。
```
var div = document.getElementById("myDiv");
```

getElementByTagName(): 要取得元素的标签名，返回NodeList，访问的时候可以用item(),或者用尖括号。若传入“*”，则返回全部元素。

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> nameItem(): 通过元素的name特性取得集合中的项。</span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">nameItem(): 通过元素的name特性取得集合中的项。</span><pre name="code" class="javascript">var images = document.getElementByTagName("image");

alert(images.item(0).src);

getElementByName(): 返回给定name特性的所有元素，最常使用的是取得单选按钮

一致性检测：用于检测浏览器实现dom的哪些部分。

var hasXmlDom = document.implement.hasFeature("XML",1.0);

文档写入：用于向网页中动态的加入内容。

write():按原样写入，writeln()会在结尾加一个\n。

<html>
<head>
   <title>document.write()Example 3</title>
</head>
<body>
   <script type="text/javascript">
        document.write("<script type=\"text/javascript\" src=\"file.js\">"+"<\/script>");
   </script>
</body>
</html>

open()、close():用于打开和关闭网页的输入流。如果是在页面加载期使用write()、writeln()，方法，则不需要用这个方法

Element：用于表现XML,HTML，提供了对元素标签名、子节点和特性的访问。特性

nodeType：1
nodeName：元素标签名
nodeValue：null
parentNode：Document或者Element
子节点类型：Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference

HTML元素：由HTMLElement类型表示。继承自Element，并添加了一些属性。包括：

- id：元素在文档中的唯一标识符
- title：网页标题
- lang：元素内容语言代码
- dir：语言方向，一般为ltr或者rtl
- className：与元素class特性对应，即为元素指定的CSS类。

方法：

getAttribute():需要传入class而不是className。可以取得自定义特性

var div = document.geElementById("myDiv");
alert(div.getAttribute("id"));//myDiv
alert(div.getAttribute("class"));//bd

注：有两类特殊的特性需要注意。一个是style，用于通过CSS为元素指定样式，在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问会返回一个对象。第二类是类似于onClick的数据处理程序。通过getAttribute()会返回相应代码的字符串，而在访问onClick属性时，会范围一个js函数。

setAttribute():接收两个参数，要设置的特性名和值，如果该特性已存在，则替换原来的值
```
div.setAttribute("id","someOtherId");
div.setAttribute("class","ft");
```
removeAttribute():用于彻底删除元素的特性，调用该方法不仅会清除特性的值，也会从元素中删除特性。

注：使用attributes还可以使用attributes属性，一个常用的应用是序列化长字符串

function outputAttributes(element){
   var pairs = new Array(),
         i,len,attrValue,attrName;
   for(i=0,len = element.attributes.length;i<len;i++){
     attrName = element.attributes[i].nodeName;
     attrValue = element.attributes[i].nodeValue;
     pairs.push(attrName+"=\""+attrValue+"\"");
 }
    pairs.join("");
    return pairs;
}

createElement():创建元素，参数为创建元素的标签名。在创建完之后，并不会直接在页面上显示，需要通过appendChild()等方法添加到文档树中。
```
var div = document.createElement("div");
document.body.appendChild(div);
```
在IE中可以传入完整的元素标签，也可以包含属性。
```
var div = document.createElement("<div id = \"newDiv\" class=\"box\"></div>");
```

Text类型：包含的是按照字面解释的纯文本内容。包括的属性有：

nodeType:3
nodeName:"#text"
nodeValue:节点所包含的文本
parentNode：Element
不支持子节点

方法：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为止处的字符串

createTextNode():创建文本节点

normolize():父元素调用该方法，将把所有的文本节点合并为一个，nodevalue为拼起来的值

var ele = document.createElement("div");
ele.className = "message";

var text = document.createTextNode("hello ");
ele.appendChild(text);

var text2 = document.createTextNode("world");
ele.appendChild(text2);

document.body.appendChild(ele);

alert(ele.childNodes.length);//2
ele.normalize();
alert(ele.childNodes.length);//1
alert(ele.firstChild.nodeValue);//hello world

Comment类型：属性：