Javascript--DOM

document.images:包含文档中所有的元素

document.links:包含文档中所有带href特性的a元素

Element类型用于表现HTML或XML元素。HTMLElement类型继承自Element类型。并添加了一些属性。

HTMLElement.__proto__ === Element// true

读取

添加的属性:可读也可写

id

title

lang(很少使用)

dir(很少使用)

className:与元素的class特性对应。

dataset:HTML5规定可以为元素添加非标准的属性，但要添加前缀data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加，随机命名，只要以data-开头即可。可以通过元素的dataset属性来访问自定义属性

    


    var div = document.getElementById("bd");
    console.log(div.id);
    console.log(div.className);
    console.log(div.title);
    console.log(div.lang);
    console.log(div.dir);

相关方法

getAttribute():一般只有在取自定义特性情况下，才会使用此方法

setAttribute():接收两个参数，要设置特性的特性名和值

removeAttribute():用于彻底删除元素的特性

DOM methods dealing with element"s attributes:

attributes属性

attributes属性中包含一个NamedNodeMap,与NodeList类似。
通常用于遍历元素的特性。

function outputAttributes ( ele ) {
    var pairs = [],
    attrName,
    attrValue,
    i,
    len;

    for(i = 0; i < ele.attributes.length; i++) {
        attrName = ele.attributes[i].nodeName;
        attrValue = ele.attributes[i].nodeValue;
        pairs.push(attrName + "=" + attrValue + """)
    }
    pairs.join("");
}

操作类名时，需要通过className属性添加、删除、和替换类名。因为className是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。

    


    // 删除"user"类

    // 首先取得类名字字符并拆分成数组
    var div = document.getElementsByTagName("div")[0];
    var className = div.className.split(/s+/);

    // 找到要删的类名
    var pos = -1,
        i,
        len

    for(i = 0,len = className.length;i < len;i++) {
        if(className[i] === "user") {
            pos = i;
            break;
        }
    }

    className.splice(i,1);

    // 把剩下的类名拼成字符串并重新设置
    div.className = className.join(" ");

为了从div中删除class属性中的"user",以上这些代码都是必须的。很多javascript都实现了这个方法，以简化这些操作

classList

HTML5新增了一个操作类名的方式，可以让操作更简单也更安全。那就是为所有元素添加classList这个属性。这个classList属性是新集合类型DOMTokenList的实例。这个属性是只读的，有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。如果你想修改classList属性，那么可以通过它定义的以下几个方法进行修改。

add(value):将给定的字符串值添加到列表中。如果值已经存在，就不添加了

remove(value):从列表中删除给定的字符串

contain(value):表示列表中是否存在给定的值，如果存在则返回true,不存在返回false

toggle(value):如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它

Browser Compatibility

insertAdjacentHTML():接收两个参数，插入位置和要插入的HTML文本

第一个参数必须是下列值之一:

beforebegin:在当前元素之前插入一个紧邻的同辈元素

afterbegin:在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素

beforeend:在当前元素之下插入一个新的的子元素或在最后一个子元素之后插入新的子元素

afterend:在当前元素之后插入一个紧邻的同辈元素

浏览器兼容性

包含的是可以照字面意思接收的纯文本内容。

 


HELLO WORLD!

DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串。

浏览器在解析文档时，永远不会创建相邻的文本节点。

出现相邻的文本节点只会作为执行DOM操作的结果出现

如果在一个包含两个或多个文本节点的父元素上调用，Node类型的normalize()方法，则会将所有文本节点合并成一个节点。

var ele = document.createElement("div");
var text1 = document.createTextNode("Hello World!");
var text2 = document.createTextNode("Hi");
ele.appendChild(text1);
ele.appendChild(text2);

document.body.appendChild(ele)

console.log(ele.childNodes.length);// 2
ele.normalize();
console.log(ele.childNodes.length);// 1

splitText():这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。

var ele = document.createElement("div");
var text = document.createTextNode("Hello World!");
ele.appendChild(text);

document.body.appendChild(ele)

var newNode = ele.firstChild.splitText(5);
console.log(newNode.nodeValue);// " World"

// 创建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1.1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2.1"));

// 创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1.2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2.1"));

// 添加到文档中
document.body.appendChild(table);

可以通过Document类型和Element类型的实例调用他们。

1.querySelector()
2.querySelectorAll()

Browser Compatibility-querSelector
Browser Compatibility-querSelectorAll

Note:

不像如getElementsByTagName这样的API, 通过以上两个API返回的对象不是live的。也就是说当文档改变的时候，他们不会改变。

具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的 动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题

3.document.getElementsByTagName():返回包含0或多个元素的NodeList。在HTML文档中，这个方法会返回一个 HTMLCollection对象，作为一个动态集合，该对象与NodeList非常相似。

4.getElementsByClassName():返回HTMLCollection对象，所以使用这个方法与使用getElementsByTagName()以及其他返回NodeList的DOM方法具有同样的性能问题

Browser Compatibility

NodeList及其近亲NameNodeMap和HTMLCollection这个三个集合都是动态的。也就是说每当文档结构发生变化，他们都会得到更新。
本质上:NodeList对象是在访问DOM文档时实时运行的查询。

DOM操作往往是Javascript程序中开销最大的部分，而因访问NodeList导致的问题最大。一般来说，尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一次基于文档的查询。所以，可以考虑将从NodeList取得的值缓存起来。或者尽量减少DOM操作

对于元素间的空格，IE9以及之前不会返回文本节点，而其他所有浏览器都会返回文本节点。这样就导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补这一差异。

Element Tranversal API为DOM元素添加了以下5个属性

childElementCount:返回子元素(不包括文本节点和注释)的个数

firstElementChild:指向第一个子元素;firstChild的元素版

lastElementChild:指向最后一个子元素;lastChild的元素版

previousElementSibling:指向前一个同辈元素;previousSibling的元素版

nexrtElementSibling:指向后一个同辈元素;nextSibling的元素版

Browser Compatibility

这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表经层叠而来的样式。

cssText

length

item(index)

getPropertyValue(propertyName)

removeProperty(propertyName)

setProperty(propertyName, value, priority)

getPropertyCSSValue(propertyName)

getPropertyPriority

parentRule

NOTE:

"DOM2级样式"规范规定样式对象上的相应属性名应该是cssFloat。而IE则支持的是styleFloat。

对于使用短划线(例如background-image)的CSS属性名，必须将其转换成驼峰大小写形式，才能通过Javascript来访问。

getComputeStyle():
接收两个参数，第一个参数为，要取得计算样式的元素和一个伪元素字符串。
返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

// IE
var myDiv = document.getElementById("myDiv");
var computeStyle = myDiv.style.currentStyle

// 其他浏览器
var computeStyle = document.defaultView.getComputedStyle(myDiv, null)

NOTE:无论在哪个浏览器，所有计算的样式都是只读的。

CSSStyleSheet类型表示的是样式表，包括通过元素的样表和在