DOM:(document)
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)
3 # 动态添加 删除样式 #
<!--动态添加样式(只针对W3C FF chrom)-->
document.styleSheets[0].insertRule(".div1{height:150px;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);
4 # 获取最终样式(只能获取,不能赋值) #
针对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.previousSibling;
}
return b;
}
alert(a(span).nodeName);