document 对象的集合对象以及为什么js有时候需要在body中

来源：互联网发布：网络辣条是什么意思编辑：程序博客网时间：2024/06/07 04:51

以下通过分析举例 document 对象的集合对象来发现js代码位置的问题

了解Document对象：

Document 对象：每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

document 对象的集合对象：

all[ ]返回对文档中所有HTML标记对象的引用forms[ ]返回对文档中所有Form标记对象的引用images[ ]返回对文档中所有Image标记对象的引用links[ ]返回对文档中所有Area和Link标记对象的引用

Document 对象方法：

方法描述 close()关闭用 document.open() 方法打开的输出流，并显示选定的数据getElementById()返回对拥有指定 id 的第一个对象的引用getElementsByName()返回带有指定名称的对象集合getElementsByTagName()返回带有指定标签名的对象集合open()打开一个流，以收集来自任何 document.write()
或 document.writeln() 方法的输出write()向文档写 HTML 表达式或 JavaScript 代码writeln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符

其中getElementsByName() 、getElementsByTagName() 方法获得的是一个节点集合。(注意是Elements)

要操作集合里的单个节点，可以使用下标法或集合的item方法。下面两条语句均可以获得集合中的第一个节点。

var oElement = collObject[0]; // 方括号var oElement = collObject.item(0);// 圆括号

接下来通过一个例子说明上述集合对象的用法

向网页中设计两个表单：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><!-- 表单代码 --><form id="Form1" name="Form1"><p>您的姓名：<input type="text" placeholder="id=Form1 name=Form1" size="26"></p></form><form id="Form2" name="Form2" ><p>您的编号：<input type="text" placeholder="id=Form2 name=Form2" size="26"></p></form><!-- js代码 --><script type="text/javascript">document.write("<p>第一个表单名称是"+document.forms[0].name+"</p>");//根据对象的forms[]集合获取元素节点document.write("<p>第一个表单名称是"+document.getElementById("Form1").name+"</p>");//根据id属性获取元素节document.write("<p>第二个表单名称是"+document.getElementsByName("Form2").item(0).name+"</p>");//根据name属性获取元素节点document.write("<p>第二个表单名称是"+document.getElementsByTagName("form")[1].name+"</p>");//根据标记名获取元素节点</script></body></html>

页面加载完成效果图：

需要注意的是，

1、上述js代码中通过四种方法来获取第一个表单名称和第二个表单名称。
2、第一种就是通过 document 的对象的集合来获取节点。
3、第二、三、四种都是通过document对象的方法来获取。
4、其中第三种和第四种的对象方法返回的是对象的集合，分别采用不同的下标方式来获取。
5、注意圆口和方括号的区别，item后边跟的是圆括号。方括号则无效
6、若<script></script>标记中的 js 代码写到<head>之前网页中将只会加载HTML处的代码。

js放在head和body中的不同：
放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会顺序加载。
浏览器文档解析的时间不同。浏览器解析html是从上到下的。
如果把javascript放在head里的话，则先被解析,这时下面dom还没有加载完成。所以找不到id和标签名等，此时js无效。

为什么我们在定义function函数时候可以放在<head>之前呢，因为页面首先加载<head>里面的js，但方法function不会执行，

function需要在被触发的时候才执行，之后会加载body里面的内容，body页面中function函数被触发（如点击事件），此时js就会被执行。

阅读全文

0 0