JavaScript笔记（第10、11、12章）

第10章 DOM

Node类型

常用节点类型：

ELEMENT_NODE (1)

ATTRIBUTE_NODE(2)

TEXT_NODE(3)

COMMENT_NODE(8)

DOCUMENT_NODE(9)

DOCUMENT_TYPE_NODE(10)

DOCUMENT_FRAGMENT_NODE(11)

查看节点类型的方法：

if(node.nodeType == 1){
    alert("this is an element.")
}

node.nodeName    返回标签名，大写

node.nodeType    返回节点类型（1-12）

节点关系：

node.childNodes    一个NodeList对象，是一个动态查询结果，不是一个快照，DOM结构变化能够自动反应到NodeList对象。

NodeList对象常用的方法属性：nodeList.item(index)  == nodeList [index], nodeList.length.

node.firstChild

node.lastChild

node.parentNode

node.nextSubling

node.previousSibling

node.hasChildNodes() 如果该节点存在子节点，返回true

操作节点：

var return_newNode = node.appendChild(newNode);  增加新节点，插入到childNodes的尾部，返回新节点的指针

var return_newNode = node.insertBefore(newNode, oldNode); 将newNode 插入到oldNode 前面，如果oldNode=null，同appendChild()

var return_toRemoveNode = node.repalceChild(newNode, toRemoveNode) ; 返回被替换的节点，并从节点树移除，用newNode替换

var retur_toRemoveNode = node.removeChild(toRemoveNode);

var deepList = node.cloneNode(true);  复制包含子节点的复制

var shallowList = node.cloneNode(false); 浅复制，不复制子节点

Document类型 

document

nodeType == 9

nodeName == "#document"

nodeValue == null

parentNode == null

ownerDocument == null

childNodes == (DocumentType | Element | ProcessingInstruction | Comment)

document.documentElement  取得HTML元素的引用

document.body

document.doctype

document.title  //直接修改不会反应到标签页上的标题

document.URL  取得完整的URL

document.domain  取得域名

document.referrer  取得来源页面的URL,利用这个方式可以获得上一页面的地址

查找元素：

document.getElementById("id")  //注意IE <= 7 的版本把name也当成id

document.getElemetsByTagName("p")  //可以使用“*”通配符

document.getElementsByClassName("class")

document.getElementsByName("class")

特殊集合：

document.anchors 返回所有带name属性的<a>

document.forms

document.images

document.links  返回所有带href属性的<a>

DOM一致性检测：

var hasFeatureCore2 = document.implementation.hasFeature("core", "2.0")

缺点：浏览器欺骗，最好使用能力检测

Element类型

nodeType == 1

nodeName == 值为元素的的标签名

nodeValue == null

parentNode == Document  |  Element  

tagName == nodeName  返回大写标签

注意在检测标签类型时注意将tagName | nodeName 转换为lowercase。

常用方法：

var div = document.getElementById("myDiv")

div.getAttribute("id")  //可以通过该方法获得属性的值

div.setAttribute("id", "newId") //可以通过该方法设置属性值

div.removeAttribute("id") //可以移除一个属性

Tips:HTML5规范要求给自定义特性加上data-前缀

也可以通过DOM属性来访问，例如：div.id 

但是不能访问自定义的属性

有两个特殊的属性：style 和 onclick， div.style 返回CSSStyleDeclaration对象，而div.getAttribute("style")返回字符串，div.onclick 返回一个function对象，而getAttribute返回函数的字符串

创建元素：

newDiv = document.createElement("div"); 创建一个游离节点

Text类型

nodeType == 3

nodeName == "#text"

nodeValue == 包含的文本

parentNode == ELement

没有子节点

appendData(text)  将text添加到尾部

deleteData(offset,count) 从offset位置开始删除count个字符

insertData(offset,text) 

replaceData(offset,count,text)

splitText(offset)  从offse指定的位置将文本节点分成两个文本节点

substringData(offset, count)

创建文本节点：

document.createTextNode("ssss")

规范化文本节点：

node.normalize()  将相邻的文本节点合并为一个文本节点

DOM操作技术

动态脚本：

function loadScript(url){
    var script = document.createElement("script");
    script.type="text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

动态样式：

function loadStyles(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href=url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

操作表格：

表格专有属性和方法

第11章 DOM扩展

第10章 DOM