JS操作DOM
JS 里核心内容之一应该就是操作DOM了吧，先了解一下什么是DOM，DOM的全称是 Document Object Model,由此可知，DOM由 document和object两部分组成
document不是普通的文档 而是 html 和xml这2种类型的文档，因为他们都有一个共同的特点 标记语言
object 这个更简单了，js不可能直接操作标记的元素，所以必须要把这些元素转换成js对象，然后才可以用js操作
因此js就把document和object联系起来，操作DOM了。
Js操作DOM文档，主要是操作3个方面：
1、操作元素的属性
2、操作元素的内容
innerText 只有文本没有其他标签，但是它不兼容，在火狐里的话得用textContent
innerHTML 这个是通用的，没有兼容性问题
<a id="t" href="http://abc.com" title="test">test</a> <script> var obj = document.getElementById("t"); alert(obj.href); obj.title = "asd" alert(obj.title); alert(obj.innerText); obj.innerHTML = "<b>Test</b>"; alert(obj.innerText); alert(obj.innerHTML); alert(obj.outerHTML); //<a id="t" href="http://abc.com" title="test">test</a> alert(obj.outerText); //test </script>
我发现，每次设置值，然后在获取值，要不要写个方法封装一下呢
<a id="t" href="http://abc.com" title="test">test</a> <script> var obj = document.getElementById("t"); alert(NameValue(obj)); NameValue(obj, "<b>qqqqqqqqqqq</b>"); alert(NameValue(obj)); function NameValue(obj,value) { if (typeof (value) == "undefined") { return obj.innerText; } else { obj.innerText = value; 1
//obj.innerHTML = value; 2
} } </script>
这样就好了，但是我发现,在设置值的时候，如果用的1方式的话，那么页面上显示的就是 <b>qqqqqqqqqqq</b>弹出框也是<b>qqqqqqqqqqq</b>，如果用的是2方式
那么页面上显示的是加粗的qqqqqqq ,弹出框里是qqqqqq，我想此时才真名明白了innerText和innerHTML的真正用法了吧。
但是对于表单元素的话，获取值的时候必须要value
还要补充一点，将DOM元素转换成js对象有2种方式：
1、
document.getElementsByTagName("div"); 数组
document.getElementById("Id"); 一个
document.getElementsByName("Name"); 数组
2、
最重要的：操作节点
<div>
<p>111111111111111</p>
<div>222222222222222222222222</div>
<ul id="u">
<li>33333333333q</li>
<li>33333333333w</li>
<li>33333333333e</li>
<li>33333333333r</li>
</ul>
<h2>4444444444</h2>
</div>
<script>
var obj = document.getElementById("u");
// alert(obj.nodeValue); //null 为甚是null请看下面
//alert(obj.nodeType); // nodeType=1说明是节点元素
//alert(obj.nodeName);
for (var i = 0; i < obj.childNodes.length; i++) {
//document.write(obj.childNodes[i].nodeName + " : " + obj.childNodes[i].nodeValue+"<br/>");
//这就是执行的结果 为甚长度是9呢？
//#text :
//LI : null
//#text :
//LI : null
//#text :
//LI : null
//#text :
//LI : null
//#text :
//另外为什么要判断一下节点的类型，原因很简单，由于浏览器的兼容性问题，换行也是一个节点，所以根据节点类型先排除非元素类型的节点
if (obj.childNodes[i].nodeType == 1) {
//<li>33333333333q</li>获取它的节点值不能是节点.nodeValue
//因为 33333333333q 是一个文本节点，它的父节点是 li，所以结果应该是
//li.childNodes[0].nodeValue
document.write(obj.childNodes[i].nodeName + " : " + obj.childNodes[i].childNodes[0].nodeValue + "<br/>");
}
}
document.write(obj.previousSibling.previousSibling.nodeName + " : " + obj.previousSibling.previousSibling.childNodes[0].nodeValue + "<br/>");
document.write(obj.nextSibling.nextSibling.nodeName + " : " + obj.nextSibling.nextSibling.childNodes[0].nodeValue);
</script>
接下来小谈一下 文档流 ：
aaaa<br /> aaaa<br /> aaaa<br /> aaaa<br /> <script> function Test() { document.write("bbbb<br />"); document.write("bbbb<br />"); document.write("bbbb<br />"); document.write("bbbb<br />"); } // Test(); 1 </script> cccc<br /> cccc<br /> cccc<br /> cccc<br /> <a onclick="Test();">Add</a> 2
当使用方式1 的时候，页面上abc按顺序来，当使用方式2 的时候，页面上有a和c，点击后，就只有b了，原因很简单
因为，页面刚加载完的时候，这个当前的文档流已经完成了，此时点击执行的时候，因为用的是document.write();就是再向文档流里下东西，因为当前文档流已经关闭了，所以只能向第二个文档流里写入，所以此时没有a和c，就只有b了
插入节点
aaaa<br />
<div id="id" style="background:yellow;">
<p>111</p>
<p id="s">222</p>
</div>
<script>
function Test() {
var img = document.createElement("img");
img.src = "http://static.cnblogs.com/images/adminlogo.gif";
var a = document.createElement("a");
a.href = "http://www.baidu.com";
a.target = "_blank";
a.title = "good" + new Date().getSeconds();
// a.innerText = "haha"
a.appendChild(img);
var p = document.getElementById("id");
// p.appendChild(a);//将新元素放到p元素的末尾多个新元素按照先来后到的顺序排列
var s = document.getElementById("s");
p.insertBefore(a, s);//将新元素插入到父元素的指定的某个子元素之前，但是插入的多个新元素的顺序还是正常的先来后到行的。
}
// Test();
</script>
因为系统只提供了在父元素下指定的子元素前插入节点，并未提供在指定的元素后面插入节点，所以打算自定义一个方法：
function insertAfter(oem,obj, em) { //因为我用的是谷歌浏览器，如果2行代码之间有换行的话要想定位到真是的兄弟元素，就得来2次nextSibling if (obj.nextSibling.nextSibling.nodeType == 1) { oem.insertBefore(em, obj.nextSibling.nextSibling); } else { oem.appendChild(em); } }
删除子节点的：
function Del() { var p = document.getElementById("id"); p.removeChild(p.lastChild); //从下往上删除， 但要注意 换行是否占一个元素节点
p.removeChild(p.firstChild);//从上往下删除 }
浙公网安备 33010602011771号