DOM

1 document属性:title URL bgColor fgColor

使用document 的title(标题) 属性
alert(document.title);
document.title="改变后的标题";

使用document 的URL(必须大写) 属性
alert(document.URL);

使用document 的bgColor 属性
document.bgColor="red";

使用document 的fgColor 属性
document.fgColor="blue";

方法:getElementById()通过ID获取元素
示例:
var button = document.getElementById("button");
alert(button.value);

2 getElementsByTagName()通过标签名获取元素(返回指定标签名的对象集合)

属性:length 可通过下标方式访问

示例:
var button = document.getElementById("button");
alert(button.value);

var input = document.getElementsByTagName("input");
alert(input.length);通过length
alert(input[3].value);通过下标方式访问

3 getElementsByName()返回带有指定名称的对象集合

属性:length 可通过下标方式访问
问题:有兼容性问题 ,如果name存在于form表单中,可以正常使用,如果出现在div元素中,则不能正常返回值(IE 不能使用 FF CHROM 可以使用)

示例:
var input = document.getElementsByName("input");
alert(input[0].value);
alert(input.length);

4 getElementsByClassName()返回指定的类名的对象集合

属性:length 可通过下标方式访问
问题:有兼容性问题 ,在 IE 不能使用 ,在 FF CHROM 可以使用

解决兼容性问题:

unction getClassName(ClassName){

if(document.getElementsByClassName){
return document.getElementsByClassName(ClassName)
}else{
var all = document.getElementsByTagName("*");
var arr=[];
for(var i=0;i<all.length;i++){
if(all[i].className == ClassName){
arr.push(all[i]);
}
}
return arr;
}

}
alert(getClassName("class1")[0].value);

<input class="class1" name="input" type="text" value="123"/>
<input class="class1" name="input" type="text"/>
<input class="class1" name="input" type="text"/>
<input id="button" type="button" value="刷新"/>

5 write() document.write("")输出数据在网页上

document对象集合:

1 all:所有对象集合 使用该属性用于判断/解决兼容性问题

示例:
if(document.all){
alert("IE") ;
}else{
alert("OTHER")
}
针对IE 则输出 "IE" 针对FF或者CHROME 则输出 "OTHER";注:document.all只针对IE;

2 form :所有form表单集合
访问:通过下标/通过name

示例:

alert(document.forms[0][2].value);
alert(document.forms[0].name1[0].value);

<form action="">
<input name="name1" type="text" value="1"/>
<input name="name1" type="text" value="2"/>
<input type="text" value="3"/>
<input type="text" value="4"/>
</form>

操作元素内容:

innerHTML:设置或获取 *标签 中的内容 比如"<h1>测试</h1>"

示例:var a = document.getElementById("a");
alert(a.innerHTML);

<div id="a"><h1>测试</h1></div>获取的是"<h1>测试</h1>"
有兼容问题:
innerText:获取文字内容(针对IE)

textContent:获取文字内容(FF CHROM)

解决兼容性问题:

var a = document.getElementById("a");
function b(a){
if(document.all){
alert(a.innerText);
}else{
alert(a.textContent);
}
}
b(a);

<div id="a">
<h1>测试</h1>
</div>

属性操作: 对象.属性=值
var a = document.getElementsByTagName("a")[0];
a.href="一个新的地址";
a.className="无设置CLASS标签时,可以取CLASS名";
a.getAttribute("href","newhref");

getAttribute("属性") 获取属性 setAttribute("属性","值") 设置属性

样式操作:
1 行内样式:*对象.style.属性

var div = document.getElementsByTagName("div")[0];
div.style.backgroundColor="red";值必须为字符串

小技巧:div.className = "另一个设置了样式的类名";原class设置的样式全部变成新的样式

2 CSS层叠样式 : 通过ID更改样式(批量更改尽量用CLASS值更改)
通过CLASS更改样式(批量更改)
更改或获取某个属性的值:document.styleSheets[index].rules[index].style.属性(IE chrom)
所有style标签中第[index]个标签 标签中第[index]个对象
document.styleSheets[index].cssrules[index].style.属性(firefox)

# 动态添加 删除样式 #
<!--动态添加样式(只针对W3C FF chrom)-->
document.styleSheets[0].insertRule(".div1{height:150px;background-color:red;150px;}",2);

动态删除样式(只针对W3C)
document.styleSheets[0].deleteRule(0);

动态添加样式(IE chrom)
document.styleSheets[0].addRule(".div1","height:300px;300px;",2);

动态删除样式(IE chrom)
document.styleSheets[0].removeRule(2);

# 获取最终样式(只能获取,不能赋值) #
针对W3C
alert(document.getComputedStyle(div1,null).width);
alert(document.getComputedStyle(div1,null)["width"]);

针对IE:对象.currenStyle.属性
alert(div1.currentStyle.width);

#
节点操作 #

1 获取该父元素的节点(无兼容问题)

alert(span.parentNode.nodeName);

2 获取对象所有子节点(换行也算节点,这个要注意,可以用,但是有兼容问题)

alert(father.childNodes.length);//返回 9 有兼容问题

解决兼容问题:

function a(obj){
var arr = [];
for(var i = 0;i<obj.childNodes.length;i++){
if(!(obj.childNodes[i].nodeType == 3 && obj.childNodes[i].nodeValue.trim()=="")){
arr.push(obj.childNodes[i]);
}
}
return arr;
}
alert(a(father).length);

3 获取第一个子节点 有兼容问题 返回换行
alert(father.firstChild.nodeName);

解决兼容问题:

function a(obj){
var b = obj.firstChild;
while(b.nodeType == 3 && b.nodeValue.trim() == ""){
b= b.nextSibling;
}
return b;
}
alert(a(father).nodeName);

4 获取最后一个子节点 有兼容问题 返回换行

alert(father.lastChild.nodeName);

解决兼容问题:

function a(obj){
var b = obj.lastChild;
while(b.nodeType == 3 && b.nodeValue.trim() == ""){
b= b.previousSibling;
}
return b;
}
alert(a(father).nodeName);

5 获取下一个兄弟节点 有兼容问题 返回换行
alert(father.nextSibling.nodeName);

解决兼容问题:

function a(obj){
var b = obj.nextSibling;
while(b.nodeType == 3 && b.nodeValue.trim() == ""){
b= b.nextSibling;
}
return b;
}
alert(a(div).nodeName);

6 获取上一个兄弟节点 有兼容问题 返回换行
alert(father.previousSibling.nodeName);

解决兼容问题:

function a(obj){
var b = obj.previousSibling;
while(b.nodeType == 3 && b.nodeValue.trim() == ""){
b= b.nextSibling;
}
return b;
}
alert(a(span).nodeName);