dom的节点类型

# dom的节点类型

# nodeType

节点类型

节点类型	-	描述	子节点
1	Element	代表元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2	Attr	代表属性，dom4不再支持	Text, EntityReference
3	Text	代表元素或属性中的文本内容。	None
4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。	None
5	EntityReference	代表实体引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6	Entity	代表实体。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7	ProcessingInstruction	代表处理指令。	None
8	Comment	代表注释。	None
9	Document	代表整个文档（DOM 树的根节点）。	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	向为文档定义的实体提供接口	None
11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12	Notation	代表 DTD 中声明的符号。	None

# nodeName和nodeValue

nodeName和nodeValue这两个属性的值完全取决于元素节点和文本节点

nodetype=1 ；nodeName=大写的标签 ,nodeValue=null，tagName=nodeName,也是大写的标签名(在HTML中，如果是xml或者是xhtml，标签名始终与源代码中的大小一致，所以可以转化成小写形式对比)
nodetype=2 ：nodeName=属性名,nodeValue=属性值
nodetype=3 : nodeName=#text nodevalue=节点包含的文本
nodetype=8 : nodeName=#comment nodevalue=注释的内容
nodetype=9 ：nodeName=#document,nodeValue=null
nodetype=11 ：nodeName=#document-fragment,nodeValue=null

# Document类型

子节点可以是DocumentType(最多一个) Element(最多一个) processingInstrcution Comment

document.documentElement => 取得对<html>的引用
document.childNodes[x] => 获取所需的内容
document.body => 获取body
document.doctype => 获取<!doctyope>
document.title => 获取/修改title
document.URL => 获取URL路径
document.domain => 获取/修改域名
document.referrer => 获取来源
document.compatMode => 判断当前文档的渲染模式

domain设置可解决一些跨域的问题
情形：在同一个页面中来自不同子域的frame，不能通信，
如a:www.wrix.com b:kk.wrix.com无法通信;但如果ab的domain都设置为wrix.com就可以通信了
-------------------------------------
浏览器对domain属性有个限制，即一旦放松就不能再收紧
//来自kk.aa.com页面
document.domain ='aa.com' √
document.domain ='kk.aa.com' ×

# document.implementation

用来创建一个新的HTML文档,有兼容问题，未来可能改动

var doc = document.implementation.createHTMLDocument(title);

doc 是新建的HTML文档.
title 是doc中的title标签中的文本.

# document.importNode

将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中.ie浏览器不支持

var node = document.importNode(externalNode, deep);

node 导入当前文档的新节点. 新节点的 parentNode 是 null, 因为它还没有插入当前文档的文档树中,属于游离状态.
externalNode 将要从外部文档导入的节点.
deep 可选一个布尔值,表明是否要导入节点的后代节点.

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

源节点不会从外部文档中删除,被导入的节点是源节点的一个拷贝.

# Element类型

获取修改element属性

# Text类型

浏览器解析文档时，不会创建同胞文档节点，只有人为在dom脚本中添加，同时可以使用normalize来合并多个文本节点为一个;splitText则可以将一个文本节点拆成多个

div.firstChild.nodeValue="xxxxx"

# normalize

let element = document.createElement("div");
element.className = "message";
           
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
           
let anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);    
document.body.appendChild(element);
console.log(element.childNodes.length);     // 2       
element.normalize();
console.log(element.childNodes.length);     // 1
console.log(element.firstChild.nodeValue);  // "Hello world!Yippee!"

# splitText

let element = document.createElement("div");
element.className = "message";
           
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
           
document.body.appendChild(element);
           
let newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue);  // "Hello"
alert(newNode.nodeValue);             // " world!"
alert(element.childNodes.length);     // 2

← 不宜使用的Javascript语法 jquery基本api →