文档对象模型
1.DOM把html文档看成由元素,属性和文本组成的一棵倒立的树
名称 描述
bgColor 页面的背景颜色
fgColor 文本的前景颜色
title 页面标题
document对象
该对象的方法主要用于操作文档节点,控制其内容和外观。
常用方法:
write:用于向html文档中动态输入内容
getElementById:获取指定id的html页面元素对象
getElementsByTagName:返回所有指定标签名的HTML页面元素对象
getElementsByName:获取一组指定name的html页面元素对象
createElement:创建代表某个html元素的对象
document.getElementById(id):通过id访问页面元素
<body>
<script type="text/javascript">
document.title="document的属性";
document.bgColor="blue";
document.write("document对象的学习")
document.fgColor="white";
function setContent(){
var obj=document.getElementById("content");
obj.innerHTML="<h3>动态添加标题</h3>";
}
function setStyle(){
var obj=document.getElementById("content");
obj.style.borderColor="red";
obj.style.borderStyle="solid";
obj.style.borderWidth="2px";
obj.style.color="orange";
}
</script>
<div id="content">
</div>
<input type="button" value="添加内容" οnclick="setContent()" />
<input type="button" value="修改样式" οnclick="setStyle()" />
</body>
几乎所有的元素对象都有innerHTML属性。innerHTML属性是一个字符串,用来设置或获取位于对象起始和结束标签之间的HTML内容。
className属性
<style type="text/css">
.con{
width: 600px;
height: 600px;
border: double;
background: yellow;
}
</style>
<body>
<div id="content"></div>
<input type="button" value="修改样式" οnclick="setStyle()" />
<script type="text/javascript">
function setStyle(){
var obj=document.getElementById("content");
obj.className="con";
}
</script>
</body>
document.getElementsByName(name):通过name访问页面元素。
参数name为必选项,为字符串类型。返回值为数组对象,如果无符合条件的对象,则返回空数组。
checkbox应用:
<body>
<th>
<input type="checkbox" id="allCb" οnclick="check()" />全选
</th>
<td><input type="checkbox" name="item" /></td>
<td ><input type="checkbox" name="item" /> </td>
<script type="text/javascript">
function check(){
var cb1=document.getElementById("allCb");
var chs=document.getElementsByName("item");
for(var i=0;i<chs.length;i++){
chs[i].checked=cb1.checked;
}
}
</script>
</body>
document.getElementsByTagName(tagname):通过标签签名访问页面元素。参数tagname为必选项,为字符串类型。返回值是指定标签名的对象的集合,如果无符合条件的对象,则返回空数组。
当鼠标移动到菜单上时,修改菜单的背景图像;当鼠标移开时,菜单恢复原来的样式。
<body>
&