Javascript学习笔记5 DOM

喜欢ヅ旅行 2022-05-29 06:05 259阅读 0赞

**DOM：文档对象模型，针对HTML和XML文档的一个API，DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构**

# Node类型 #

**所有的节点类型都继承自Node类型**，每个节点都有个`nodeType`属性，表明节点的类型。  
**重要的类型包括：**

*  `Node.ELEMENT_NODE` (1) 元素节点
 *  `Node.ATTRIBUTE_NODE` (2) 属性节点
 *  `Node.TEXT_NODE`(3) 文本节点
 *  `Node.DOCUMENT_NODE` (9) 文档节点

## 属性 ##

**nodeType**：保存着节点类型，例如，若是元素节点，该值等于1  
**nodeName**：若是元素节点，那么则是标签名  
**nodeValue：**若是元素节点，该值为null  
**childNodes**：保存一个NodeList对象，可以通过方括号访问子节点。**(子节点可能元素、文本节点、注释等，在遍历时务必注意判断节点类型)**

var firstChild = someNode.childNodes[0];   //第一个子节点
    var count = someNode.childNodes.length;  //子节点的数目

**parentNode**：指向文档树中的父节点  
**previousSibling** 和 **nextSibling**：节点的前一个兄弟节点或后一个兄弟节点，没有则为null  
**firstChild** 和 **lastChild**：节点的第一个子节点和最后一个子节点  
**ownerDocument**：指向整个文档的文档节点

## 方法 ##

**hasChildNodes()**：节点包含子节点时返回true  
**appendChild()**:追加一个子节点,成功则返回该节点

someNode.appendChild(newNode);

**insertBefore()**:在某子节点之前插入新的子节点。接受两个参数，要插入的子节点和作为参照的子节点

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

**replaceChild()**:以新的子节点替换某子节点，接受两个参数，新的子节点和被替换的子节点，返回被替换的节点

someNode.replaceChild(newNode,someNode.lastChild); //替换最后一个子节点

**removeChild()：**移除子节点  
**cloneNode():**复制某节点，接受一个布尔值参数，为true时表明为深复制，该节点及其子节点树也会被复制，否则只复制该节点（该方法只会复制特性，而不会复制事件处理程序）

var deepList = myList.cloneNode(true);

**normalize():**在调用此方法节点的后代节点中查找，若找到空文本节点，则删除，若找到相邻的文本节点，则合并

--------------------

# Document类型 #

**document对象是window对象的一个属性，可以将其作为全局对象来访问，其节点类型nodeType为9**

## 属性 ##

**documentElement:** 指向文档的`<html>`元素  
**body**：直接指向`<body>`元素  
**title：**`<title>`元素的值  
**URL**：包含页面完整的URL  
**domain**：取得页面域名  
**referrer：**取得来源页面的URL

## 方法 ##

**getElementById()**：查找元素，接受元素的ID  
**getElementsByTagName():** 查找元素，接受元素的标签名，返回元素集合  
**getElementsByName():** 查找元素，接受元素的name属性值，返回元素集合（只限定于HTMLDocument类型）  
**write()**：接受一个字符串参数，将文本原样写入**(如果在文档加载完成后，再调用该方法，则会重写整个页面)**

document.write("<strong>" + (new Date()).toString() + "</strong>");

**writeln()**：与`write()`类似，但是会在末尾自动添加一个换行符（\\n）  
**open()/close()**:打开和关闭网页的输出流，不常用

## 特殊集合 ##

**document.anchors:** 所有带 **name** 特性的`<a>`元素  
**document.forms**：所有`<form>`元素  
**document.images**：所有`<image>`元素  
**document.links**：所有带 **href** 特性的`<a>`元素

--------------------

# Element类型 #

**节点类型nodeType为1，nodeName为元素的标签名，nodeValue为null**

## 属性 ##

**attributes**：包含着一个NameNodeMap，元素的每个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap。其中每个节点的nodeName就是特性名，而nodeValue就是值

var id = element.attributes["id"].nodeValue;

## 方法 ##

**getAttribute()**：访问元素属性，若不存在，则返回null。

div.getAttribute("class");
    div.getAttribute("title");

*  **与直接用`元素.属性名`访问的区别：**当访问style属性时，该方法返回CSS文本，而通过属性名访问时，返回一个对象。当访问onclick等事件处理程序时，该方法返回响应的代码，而通过属性名访问时，返回JS函数。

**setAttribute()**：设置元素属性，接受两个参数，属性名和值

div.setAttribute("id","newid");

**removeAttribute()**：删除元素特性，接受一个参数，属性名

div.removeAttribute("class");

**document.createElement()**：创建元素，返回该元素

var div = document.createElement("div");

--------------------

# Text类型 #

**节点类型nodeType为3，nodeName为”\#text”，nodeValue为文本值，没有子节点**

## 属性 ##

**nodeValue或data**：文本节点中包含的文本值  
**length**：文本字符的长度

## 方法 ##

**document.createTextNode()**：创建新的文本节点，接受一个文本字符串值

var textNode = document.createTextNode("Hello world");

**normalize():**在调用此方法节点的后代节点中查找，若找到空文本节点，则删除，若找到相邻的文本节点，则合并

element.normalize();

**splitText():** 将一个文本节点分成两个文本节点，接受一个参数，分隔的位置，返回包含后半截文本的新文本节点

var textNode = deocument.createTextNode("Hello world");
    element.appendChild(textNode);
    
    var newNode = element.firstChild.splitText(5);
    alert(element.firstChild.nodeValue); //"Hello"
    alert(newNode.nodeValue); //" world"
    alert(element.ChildNodes.length); //2

--------------------

# Attr类型 #

**nodeType值为2，nodeName是属性的名称，nodeValue是属性值，在HTML中没有子节点**

## 属性 ##

**name**：属性名称  
**value**：属性值  
**specified**：布尔值，区别属性时由代码指定的，还是默认的

--------------------

# 操作表格 #

**`<table>`元素的属性和方法**

*  **caption**：对`<caption>`元素的指针
 *  **rows**：对表格中所有行的**HTMLCollection**
 *  **tBodies**：对表格中所有`<tbody>`的**HTMLCollection**

**`<tbody>`元素的属性和方法**

*  **rows**：对`<tbody>`中行的**HTMLCollection**
 *  **insertRow(pos):** 在指定位置插入行

tbody.insertRow(0);  //在tbody中的最前面插入一行