javascript createelement_一分钟复习-JavaScript基础语法（8）

脚本化文档

文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API。DOM定义许多方式来选取元素，查询文档的一个或是多个元素。用指定的id属性，用指定的name属性，用指定的标签名字，用指定的CSS类，匹配指定的CSS选择器。

任何HTML元素可以有一个id属性，在文档中该值必须唯一，即同一个文档中的两个元素不能有相同的ID。可以用Document对象的getElementById()方法选取一个基于唯一ID的元素。

// var section = document.getElementById("section1")

HTML的name属性的值不是必须唯一，多个元素可能有同样的名字。

// var buttons = document.getElementsByName("color_button")

Document对象的getElementsByTagName()方法可用来选取指定类型(标签名)的所有HTML或XML元素。

// var buttons = document.getElementsByTagName("button")

在HTML文档和HTML元素上可以调用getElementsByClassName，来选取指定ClassName的所有HTML或XML元素。

// var buttons = document.getElementsByClassName("color")

使用querySelector()、querySelectorAll()，可以利用CSS选择器的语法来选取元素。

// var button = document.querySelector(".example");// 

通过文档结构关系来获取节点。

// parentNode，获取父节点，没有则会返回nulldocument.getElementById("main").parentNode;// childNodes，获取子节点数组document.getElementById("main").childNodes;// firstChild，获取第一个子节点，没有则会返回nulldocument.getElementById("main").firstChild;// lastChild，获取最后一个子节点，没有则会返回nulldocument.getElementById("main").lastChild;// nextSibling，前一个兄弟节点，没有则会返回nulldocument.getElementById("main").nextSibling;// previoursSibling，后一个兄弟节点，没有则会返回nulldocument.getElementById("main").previoursSibling;// nodeType，获取该节点的类型document.getElementById("main").nodeType;// nodeValue，获取Text节点或Comment节点的文本内容document.getElementById("main").nodeValue;// nodeName，获取元素标签名，大写document.getElementById("main").nodeName;// firstElementChild，类似firstChilddocument.getElementById("main").firstElementChild;// lastElementChild，类似lastChilddocument.getElementById("main").lastElementChild;// nextElementSibling，类似nextSiblingdocument.getElementById("main").nextElementSibling;// previoursElementSibling，类似previoursSiblingdocument.getElementById("main").previoursElementSibling;// childElementCount，返回子元素的数量document.getElementById("main").childElementCount;

HTML元素由一个标签和一组成为属性的名/值对组成。HTML属性不分大小写，但是JavaScript属性分大小写，从HTML属性名转换到JavaScript属性名应该采用小写。可以使用getAttribute()来获取属性，使用setAttribute()设置属性。HTML5支持使用data-XXX来设置属性，JavaScript可以使用dataset来获取所有的data-属性集合，然后使用XXX来获取具体属性。Node节点支持使用attributes来获取属性值。

var image = document.images[0]var width = parseInt(image.getAttribute("WIDTH"))image.setAttribute("class","thumbnail")// var s = document.getElementById("main").datasetconsole.log(s.age)      // 12var attributes = document.getElementById("main").attributes

使用innerHTML获取/设置标签里的HTML内容，使用outerHTML获取/设置带自身信息的所有HTML内容。使用innerText获取/设置标签里的文本内容，使用outerText获取/设置标签里的文本内容。

var s = document.getElementById("main").innerHTMLvar s = document.getElementById("main").outerHTMLdocument.getElementById("main").innerText = 'Hello World'var s = document.getElementById("main").outerText

使用createElement创建标签，使用createTextNode创建文本节点，使用cloneNode可以克隆节点。使用appendChild可以在节点里面添加节点，使用insertBefore在节点后面添加节点。使用removeChild可以删除子节点，使用replaceChild可以删除并替换节点。

var div = document.createElement("div")var t = document.createTextNode("Hello World")var newNode = t.cloneNode(true)div.appendChild(t)div.insertBefore(newNode)div.removeChild(div.childNodes[0])div.appendChild(t)div.replaceChild(t,newNode)

Document属性：

cookie：允许JavaScript程序读、写HTTP cookie的特殊属性。domain：该属性允许当Web页面之间交互时，相同域名下互相信任的Web服务器之间协作放宽同源策略安全限制。lastModified：包含文档修改时间的字符串。referrer：如果有，它表示浏览器导航到当前链接的上一个文档。该属性值和HTTP的Referer头信息的内容相同，只是拼写上有两个r。title：文档的和标签之间的内容。URL：文档的URL。

使用document.write()和document.writeln()可以向文档里面写入内容。

document.write("hello world")document.writeln("hello world")

使用window.getSelection()获取当前选取的内容。

console.log(window.getSelection())