document常用属性及属性集合

骑猪看日落 2022-08-05 15:17 307阅读 0赞
  1. 上一篇博文说删除结点信息时,有一行代码**document.body.removeChild(deleteNode)**,那**document.body**是什么呢?bodydocument什么关系呢?今天说说常用的document属性和集合属性。所谓document属性是指那些单的属性信息,它指代的是单个的对象;集合属性指的是document对象里面的那些可以归为集合的子对象。

document.title

  1. <html>
  2. <head>
  3. <title>Attribute</title>
  4. </head>
  5. <body>
  6. <script>
  7. alert(document.title);
  8. </script>
  9. </body>
  10. </html>
  11. 上面的代码,会在页面加载完成后,弹一个alert框出来,那里面内容是什么呢?
  12. 执行以下,看看结果
  13. ![SouthEast][]
  14. 弹出了title的内容,那说明document.title 指向了html页面中title标签的内容。
  15. 打个断点看看,document还有哪些属性信息?
  16. 断点打到alert(document.title);行,并对document进行监视
  17. ![SouthEast 1][]
  18. 展开document对象,可以看到
  19. ![SouthEast 2][]
  20. document的属性和集合属性太多,暂时先列这几个看看。

document.bgColor

  1. document.bgColor 表示背景颜色,当前值为十六进制表示的\#ffffff,我们给页面添加个背景色,然后再将背景色打印出来看看,将代码修改为
  2. <html>
  3. <head>
  4. <title>Attribute</title>
  5. </head>
  6. <body bgColor="#CCDDAA">
  7. <script>
  8. alert(document.bgColor);
  9. </script>
  10. </body>
  11. </html>
  12. 弹出框效果为
  13. ![SouthEast 3][]

document.anchors

  1. 一个集合类的属性document.anchors 获取所有的超链接的集合
  2. <html>
  3. <head>
  4. <title>Attribute</title>
  5. </head>
  6. <body bgColor="#CCDDAA">
  7. <a href="http://www.baidu.com" name="clj">百度</a></br>
  8. <a href="http://www.google.com" name="clj">谷歌</a></br>
  9. <a href="http://www.gougou.com" name="clj">狗狗</a></br>
  10. <script>
  11. alert(document.anchors.length);
  12. </script>
  13. </body>
  14. </html>
  15. 弹出框值为3
  16. ![SouthEast 4][]
  17. 这个示例有个奇怪的地方,就是超链接里面必须添加name属性,document.anchors才能获取到超链接,否则document.anchors 拿到的集合为空集合。如果有知道的朋友,可以说一下原因。

document.forms

再看一个集合属性document.forms 获取所有的form表单的集合

  1. <html>
  2. <head>
  3. <title>Attribute</title>
  4. </head>
  5. <body bgColor="#CCDDAA">
  6. <form id="form1">
  7. </form>
  8. <form id="form2">
  9. </form>
  10. <script>
  11. alert(document.forms.length);
  12. </script>
  13. </body>
  14. </html>
  15. 弹出框值为2,示例中有两个form表单。
  16. 获取集合类属性中的单个对象方法
  17. 接着上面的代码,假如我们想要获取到第一个form表单的id属性值,该如何获取呢?
  18. 集合类属性的结果都是集合,都可以通过数组下标的方式来获取,

  1. var forms = document.forms;
  2. for (i=0; i<forms.length; i++){
  3. alert(forms[i].id);
  4. }
  5. 其次,我们断点下集合属性。
  6. ![SouthEast 5][]
  7. 可以看到其中的item() 方法,item方法传递的参数为对象在集合中的序号
  8. alert(forms\[i\].id); 修改为 alert(forms.item(i).id); 同样出效果。
  9. 基本上,集合属性通过这两种方式访问就可以了,如果开发中遇到更多的问题,想获取更多的访问方式,那请通过上面的断点的方式,查看具体有哪些操作方法,然后再想办法入手问题。

发表评论

表情:
评论列表 (有 0 条评论,307人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Nunit属性

    1.TestFixture     标记包含测试的类。该类的特征:(1)必须是public,否则NUnit找不到它;(2)必须有缺省的构造函数,否则NUnit不会构造它;

    相关 JavaScript 属性

    获取变量的数据类型 \--- > 可以使用  typeof 来获取变量的数据类型 数字类型: 数字使用 number 定义,当一个定义的变量没有被赋值的时候跟数字类型的变量相

    相关 css属性

    solid    固体的;坚硬的;无空隙的;非中空的;实心的;结实的 border    国界;边界;边疆,设置边框 padding    填充,设置内边距 bottom