DOM
dom中文翻译是 文档对象模型
dom的NodeList以及NameNodeMap和HTMLCollection都是动态的 动态的 动态的
node（节点）
父元素的firstChild； lastChild；childNode[7];
子元素的parentNode是父元素
node的nextSibiling---->下一个同级node
node<----下一个同级node的previousSibiling
当不存在是返回null
获取节点
就是我们写html是的body div input 等一堆标签在浏览器里的结构
document.getElementById（id只能设置一个元素）
document.getElementsByTagName() **
(得到的是数组**) so 如果想获得第一个元素[0] 同时数组就会有length这个属性，
var oli=oul.getElementsByTagName("li")
alert(oli[0]);
alert(oli[1]);
还有一个问题就是在mydiv.getElementsByTagName(“li”)获得的是所有的li如果有好多层就会返回所有的li元素（就是孙子辈的也获取到了，不光子元素的）
**.getElementsByClassName() **(获得的是数组)同上
创建修改对象
createElement()
var mydiv =document.creatElement("div");
mydiv.id="myid";
mydiv.className ="myclassname";
//这时新元素未添加到文档树里 需要下面
document.body.appendChild(mydiv);
- . removeElement()
- .image
- .link
添加删除节点
- appendChild(new)添加子节点
var returnNode =someNode.appendChild(newNode);
//添加到所有子元素的最后面
alert(someNode.lastChild==newNode); //ture
- insertBefore( newNode,oldNode)
会插入newNode 到oldNode前面
var returnNode =someNode.insertChild(newNode,someNode.firstChild);
alert(newNode == newNode == someNode.firstNode);//ture
- replaceChild(new,old)
- removeChild(old)删除子节点
获取对象属性
- getAttribute("width")
- setAttribute("width")
div.setAttribute("id","otheId");
//其实直接
div.id="otherId"；
//也可以 唯一的区别就是setAttribute可以自定义一些特性就像
div.mycloth="牛仔裤"；就不好使
- removeAttribute("width")
DOM2与DOM3对都dom进行里功能升级， （其实就是dom改进版本）
- addEventListener
- removeEventListerner
- dispatchEvent
dom一致性检测
document.implementation.hasFeature("xml","2.0");
文档写入
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>\</title>
<script type="text/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>");
//可以直接在write里嵌入html（以后的innerText innerHtml都可以这么干）
// 嵌入js
document.write("<script type=\"text/javascript\" src=\"file.js\"+"</script>"); //false
document.write("<script type=\"text/javascript\" src=\"file.js\"+"</scr"+"ipt>"); //ture
</script>
</head>
<body>
</body>
</html>
动态插入脚本
js
function loadScript(url) {
var script=document.creatElement("script");
script.type="text/javascript";
script.scr=url;
document.body.appendChild(script);
}
loadScript(javascript.js);
css
function loadStyles(url) {
var link=document.creatElement("link");
link.rel="stylesheet";
link.type="text/css";
link.url=url;
var head=document.getElementsByTagName('head')[0].appendChild(link);
}
loadStyles("style.css")
注意：
div.tagName==DIV; //不是div
所以最好element.tagName.toLowerCase()=="div"; 这样就对了
dom操作时有一个问题一定要注意就是dom是动态的
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
var div=document.creatElement("div");
document.body.appendChild(div);
}
//不会停止
for(var i=0 len=divs.length;i<len;i++){
var div=document.creatElement("div");
document.body.appendChild(div);
}
