javascript document对象--js学习笔记(四)

  • 编辑时间: 2014-09-16
  • 浏览量: loading
  • 作者: 段亮

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>

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

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客