javascript document对象--js学习笔记（四）-段亮个人博客

javascript document的几种常用的对象方法

一、document.write();-------->可以直接向页面输入内容

例如：document.write("这个我的第一个网页");

二、document.getElementById();---->获取指定ID对象

如何通过ID值，来获取元素里面的值？

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="test"><span>这只是测试，能显示嘛？</span><div>

//第一种方法：

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标签对象

//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="游泳">游泳

var divObj = document.getElementsByName("test");

divObj[2].value = "睡觉";---->重新赋值

alert(divObj[2].value);

</script>

本文出处：http://www.duanliang920.com/learn/web/tx/277.html

javascript document对象--js学习笔记（四）

或许你还喜欢以下内容:

jquery制作banner全屏特效切换原理

javascript对象-js学习笔记（二）

一张图让你明白js中的距离值之间的关系

Jquery属性--学习笔记（一）

Javascript的由来-js学习笔记（一）

学习jQuery插件开发

javascript循环语句-js学习笔记（三）