学习笔记（1）Dom

来源：互联网发布：阿里云ip地址查询编辑：程序博客网时间：2024/05/29 12:30

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");