本文详细介绍了JavaScript中document对象的常用方法，包括直接输出内容、通过ID获取元素、创建HTML标签对象、通过名称获取对象等，并提供了实例演示。
javascript document的几种常用的对象方法
一、document.write();-------->可以直接向页面输入内容
例如：document.write("这个我的第一个网页");
二、document.getElementById();---->获取指定ID对象
如何通过ID值，来获取元素里面的值？
<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码集-->
<meta charset="gb2312">
<!--网页三要素-->
<title>网站标题</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="test"><span>这只是测试，能显示嘛？</span><div>
<script>
//第一种方法：
var value=document.getElementById(test).innerText;
alert(value);--->这里输出的内容是：“这只是测试，能显示嘛？”
//第二种方法
var value1=document.getElementById(test).innerHTML;
alert(value1);---->这里输出的内容是：“<span>这只是测试，能显示嘛？</span>”
</script>
</body>
</html>
小结：通过ID获取里面元素有两种方法:
1.document.getElementById(”ID”).innerText。
2.document.getElementById(”ID”).innerHTML.通过两者比较不难发现.innerHTML会输出这个DIV里面整个元素，而.innerText则只输出里面的文字。
三.document.createElement();--->创建一个html标签对象
<script type="text/javascript">
//document.createElement():创建一个元素
//appendChild(dom)向页面添加元素
var divObj = document.createElement("div");
divObj.innerHTML = "<strong>我是一个动态创建的div哦！</strong>";
divObj.style.width = "400px";
divObj.style.height = "300px";
divObj.style.background = "green";
divObj.style.border = "1px solid red";
divObj.style.marginTop = "100px";
document.body.appendChild(divObj);
</script>
四.document.getElementsByName();---->获得指定name值的对象， 只使用与含有有元素自带name的标签
<input type="checkbox" name="test" value="爬山">爬山
<input type="checkbox" name="test" value="音乐">音乐
<input type="checkbox" name="test" value="读书">读书
<input type="checkbox" name="test" value="游泳">游泳
<script type="text/javascript">
var divObj = document.getElementsByName("test");
divObj[2].value = "睡觉";---->重新赋值
alert(divObj[2].value);
</script>
扫一扫
1557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
