node 类型 12个常量 在IE中node类型不能被访问到
Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_DNDE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_REAGMENT_NODE(11)
Node.NOTATION_NODE(12)
每一个节点都有一个childNodes属性,其中保存着一个NodeList对象,NodeList是一种类型数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。
如何访问保存在nodeList中的节点,可以通过方括号,也可以使用item()方法
var firstChild = someNode.childNodes[0]
var secondChile = someNode.childNodes.item(1);
var count = someNode.chileNodes.length
每一个节点都有parentNode属性,该属性指向文档树中的父节点。 previousSibling 和 nextSibling属性 可以访问同一列表节点中的其它节点
firstChild和 listChile属性分别指向childNode列表中的第一个和最后一个节点
hasChildNodes()检测节点是否包含子节点
appendChilde 向 childNodes列表末尾添加一个节点
inserBefore 把节点添加到特定索引处 插入节点和参照节点 如果参照节点没有则执行 appendChild
replaceChild 插入节点和替换的节点
document 类型
document 表示文档 document 是HTMLDocument的一个实例 表示整个Html页面
documentElement属性始终指向HTML页面中的<html>元素
body 属性 始终指向<body>
title 属性 取得<title>元素中的文本 也可以改变其值 document.title = "new page title"
url 属性 包含页面完整的url(即地址栏中显示的url)
domain 属性 包含页面的域名
referrer 取得来源页面的url
url和domain 属性是相互关联的 document.url http://www.wrox.com/wwwcda那么document.domain就是 www.weox.com
getElementById() 和 getElementsByTagName()通过ID 和 变迁
Element类型
nodeTYpe 为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document 或Element
getAttribute传入特性值 和 setAttribute 方法 修改特性值 removeAttribute 删除特征
var value = div.getAttribute("id");
div.setAttribute("id","someotherId");
div.removeAttribute("class");
document.createElement 创建新元素 appendChild() insertBefore() replaceChild()方法
document.body.appendChild(div)
innerText 属性 操作元素中包含的所有文本内容
div.innerText = "Hello world"
动态创建脚本
var script = document.createElement("script");
script.type = "text/javascript";
script.scr = "client.js";
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)
}
loadStyles("styles.css");
Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_DNDE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_REAGMENT_NODE(11)
Node.NOTATION_NODE(12)
每一个节点都有一个childNodes属性,其中保存着一个NodeList对象,NodeList是一种类型数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。
如何访问保存在nodeList中的节点,可以通过方括号,也可以使用item()方法
var firstChild = someNode.childNodes[0]
var secondChile = someNode.childNodes.item(1);
var count = someNode.chileNodes.length
每一个节点都有parentNode属性,该属性指向文档树中的父节点。 previousSibling 和 nextSibling属性 可以访问同一列表节点中的其它节点
firstChild和 listChile属性分别指向childNode列表中的第一个和最后一个节点
hasChildNodes()检测节点是否包含子节点
appendChilde 向 childNodes列表末尾添加一个节点
inserBefore 把节点添加到特定索引处 插入节点和参照节点 如果参照节点没有则执行 appendChild
replaceChild 插入节点和替换的节点
document 类型
document 表示文档 document 是HTMLDocument的一个实例 表示整个Html页面
documentElement属性始终指向HTML页面中的<html>元素
body 属性 始终指向<body>
title 属性 取得<title>元素中的文本 也可以改变其值 document.title = "new page title"
url 属性 包含页面完整的url(即地址栏中显示的url)
domain 属性 包含页面的域名
referrer 取得来源页面的url
url和domain 属性是相互关联的 document.url http://www.wrox.com/wwwcda那么document.domain就是 www.weox.com
getElementById() 和 getElementsByTagName()通过ID 和 变迁
Element类型
nodeTYpe 为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document 或Element
getAttribute传入特性值 和 setAttribute 方法 修改特性值 removeAttribute 删除特征
var value = div.getAttribute("id");
div.setAttribute("id","someotherId");
div.removeAttribute("class");
document.createElement 创建新元素 appendChild() insertBefore() replaceChild()方法
document.body.appendChild(div)
innerText 属性 操作元素中包含的所有文本内容
div.innerText = "Hello world"
动态创建脚本
var script = document.createElement("script");
script.type = "text/javascript";
script.scr = "client.js";
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)
}
loadStyles("styles.css");