javascript-document对象
DOM document(html xml) object model
document对象(DOM核心对象)
dom对象的作用:
1.对html页面中的内容进行操作
2.对html页面中的属性进行操作
3.对html页面中的样式进行操作
一、属性
title 返回或者设置当前文档的标题
document.write(document.title);
document.write("<br/>");
document.title="DOM对象";
document.write(document.title);
URL返回当前文档的url
document.write(document.URL);
document.write("<br/>");
document.write(location.href);
bgColor设置文档的背景色
document.bgColor="pink";
fgColor设置文档的前景色(文字的颜色)
document.fgColor="blue";
二、方法
document.getElementById("idName")返回拥有指定id的第一个对象的引用
<div id="one">DOM对象1</div>
<div id="one">DOM对象2</div>
<hr>
<script>
var div1=document.getElementById("one");
document.write(div1.innerHTML); //输出 DOM对象1
</script>
document.getElementsByTagName("tagName")返回带有指定标签名的对象的集合
<div id="one">DOM对象1</div>
<div id="two">DOM对象2</div>
<hr>
<script>
var divs=document.getElementsByTagName("div");
var lengths=divs.length;
document.write(lengths);
document.write("<br/>");
for (var i=0;i<lengths;i++){
document.write(divs[i].innerHTML+" ");
}
</script>
输出
2
DOM对象1 DOM对象2
document.getElementsByName("name")返回带有指定name(名称)的对象的集合
<form>
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
</form>
<hr>
<script>
var inputs=document.getElementsByName("sex");
document.write(inputs.length); //输出 2
</script>
document.getElementsByClassName("className")返回带有指定className(类名)的对象的集合(ie8以下不支持)
<div id="one" class="box">DOM对象1</div>
<div id="two" class="box">DOM对象2</div>
<hr>
<script>
var boxes=document.getElementsByClassName("box");
document.write(boxes.length); //输出 2
</script>
兼容写法
function byClassName(className) {
var tag=document.getElementsByTagName("*");
var elements=[];
for(var i=0;i<tag.length;i++){
if(tag[i].className==className){
elements.push(tag[i]);
}
}
return elements;
}
var boxes=byClassName("box");
document.write(boxes.length); //输出 2
document.write()
四、document对象的集合
1.all所有元素的集合
document.write(document.all);
2.form所有form对象的引用
通过集合来访问相应的对象
2.1通过下标的形式
<form name="userForm">
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</form>
<hr>
<script>
document.write(document.forms[0].sex.value); //输出 boy
</script>
2.2通过name的形式(如果对象的标准属性包含有name,那么可以正常使用，否则[IE]不可正常使用。)
<form name="userForm">
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</form>
<hr>
<script>
document.write(document.forms["userForm"].sex.value); //输出 boy
</script>
