☆ 文档的子节点

Document类型可以表示HTML页面或者其他基于XML的文档。
不过,最常见的应用还是作为HTMLDocument实例的document对象。
通过这个文档对象,
不仅可以取得与页面有关的信息,
而且还能操作页面的外观及其底层结构。

虽然DOM标准规定Document节点的子节点可以是
DocumentType
Element
ProcessingInstruction
Comment

但还有两个内置的访问其子节点的快捷方式。

第一个就是documentElement属性,
该属性始终指向HTML页面中的元素。

另一个就是通过childNodes列表访问文档元素,
但通过documentElement属性则能更快捷、更直接地访问该元素。

作为HTMLDocument的实例,
document对象还有一个body属性,
直接指向元素。
因为开发人员经常要使用这个元素,
所以document.body在JavaScript代码中出现的频率非常高,


☆ 查找元素

说到最常见的DOM应用,
恐怕就要数取得特定的某个或某组元素的引用,
然后再执行一些操作了。

取得元素的操作可以使用document对象的几个方法来完成。
其中,
Document类型为此提供了两个方法:
getElementById()getElementsByTagName()。

◇ 第一个方法

第一个方法
getElementById(),接收一个参数:
要取得的元素的ID。
如果找到相应的元素则返回该元素,
如果不存在带有相应ID的元素,
则返回null。
注意,
这里的ID必须与页面中元素的id特性(attribute)严格匹配,
包括大小写。

IE8及较低版本不区分ID的大小写,
因此”myDiv”和”mydiv”会被当作相同的元素ID。

如果页面中多个元素的ID值相同,
getElementById()只返回文档中第一次出现的元素。
IE7及较低版本还为此方法添加了一个有意思的“怪癖”:
【name特性与给定ID匹配的表单元素】也会被该方法返回。
(、、及)
如果有哪个表单元素的name特性等于指定的ID,
而且该元素在文档中位于带有给定ID的元素前面,
那么IE就会返回那个表单元素。
为了避免IE中存在的这个问题,
最好的办法是不让表单字段的name特性与其他元素的ID相同。


◇ 第二个方法

另一个常用于取得元素引用的方法是getElementsByTagName()。
这个方法接受一个参数,
即要取得元素的标签名,
而返回的是包含零或多个元素的NodeList。
在HTML文档中,
这个方法会返回一个【HTMLCollection对象】,
作为一个“动态”集合,
该对象与NodeList非常类似。

对HTMLCollection而言,
我们可以向方括号中传入数值或字符串形式的索引值。
在后台,
对数值索引就会调用item(),
而对字符串索引就会调用namedItem()。

要想取得文档中的所有元素,
可以向getElementsByTagName()中传入”*”。
在JavaScript及CSS中,
星号(*)通常表示“全部”。


◇ 第三个方法

第三个方法,
也是只有HTMLDocument类型才有的方法,
是getElementsByName()。
顾名思义,
这个方法会返回带有给定name特性的所有元素。
最常使用getElementsByName()方法的情况是取得单选按钮;
为了确保发送给浏览器的值正确无误,
所有单选按钮必须具有相同的name特性,
与getElementsByTagName()类似,
getElementsByName()方法也会返回一个HTMLCollectioin。

啥是Document类型相关推荐

  1. html页面设置document类型,DOM-Document类型

    Document类型 JavaScript通过Document类型表示文档.在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,document对象是w ...

  2. Javascript之DOM(Document类型)

    JavaScript通过document类型表示文档.在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性. D ...

  3. 什么是document对象?如何获取文档对象上的元素?_javascript自学记录:Document类型...

    10.1.2 Document类型 Document类型表示文档,document对象是HTMLDocument的一个实例,document是window对象的一个属性: Document节点的特征: ...

  4. Document类型知识大全

    Document类型 1.文档的子节点 Document类型可以表示HTML页面或者其他基于XML的文档.不过,最常见的应用还是作为HTMLDocument实例的document对象.通过这个文档对象 ...

  5. 10.1.2 Document类型【JavaScript高级程序设计第三版】

    JavaScript 通过Document 类型表示文档.在浏览器中,document 对象是HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML 页面.而且,docu ...

  6. 第10章 文档对象模型DOM 10.2 Document类型

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  7. JS的Document类型

    Document HTMLDocument继承自Document. 在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的 ...

  8. JS学习之Node类型

    JS里面一共有12种Node类型.要了解Node类型详细信息可以使用nodeName和nodeValue这两个属性. 比较常用的类型有: 1)Document类型    nodeType为9,node ...

  9. (JS基础)DOM:节点类型

    Node 类型 所有节点类型都继承于 Node 类型,因此所有节点类型都共享这相同的基本属性和方法. 基本属性和方法 nodeName :节点名.对于元素类型,则是元素的标签名(均为大写),如&quo ...

  10. Node,Document,HTMLDocument,HTMLCollection解析

    这里说的是XML的这些对象,而HTML是继承这些对象的,并进行了扩展.如Document对象, Node对象 它是一个节点对象,代表文档树中的一个节点.是所有节点类型的基类 Node对象是整个DOM的 ...

最新文章

  1. 三峡大学陈迪马:土壤微食物网对全球变化的响应与反馈
  2. yolo3(目标检测)实测
  3. (总结)Nginx配置文件nginx.conf中文详解
  4. linux下生成guid,在Linux下生成GUID的程序,及编译错误 “uuid/uuid.h: No such file or directory” 的解决办法。...
  5. C++构造函数之委托构造函数
  6. Mycat分库路由规则
  7. android如何不自动获取焦点,Android 如何让EditText不自动获取焦点
  8. 必须掌握的Java基础知识(一)
  9. pythonista安装tkinter_Python又把GUI界面攻下了,今天就告诉你怎么玩
  10. paip.图片搜索工具总结
  11. 推荐几本学习Java的教材
  12. Python安装和导入cv库
  13. 纯正体验,极致商务 | 丽亭酒店聚焦未来赛道,实现共赢发展
  14. 用java下载apk解析包出错_Android 9.0 安装包解析错误 java.lang.SecurityException: Permission Denial解决方案...
  15. GIS教程之Cesium 基础入门教程
  16. java对接图灵机器人搭建自己的智能机器人
  17. Mysql事务-MVCC
  18. js分页列表找出最后一页的最后一条数据
  19. 周日:潭杯山-潭柘寺拉练
  20. 中高级自动化测试工程师技术栈

热门文章

  1. 07——Vue 中的事件处理 以及 事件修饰符 、键盘事件
  2. Elasticsearch常用查询命令
  3. Relatively Prime Graph CodeForces - 1009D
  4. 找代做java,代做JAVA程序作业、代写学生信息查询系统、代做JAVA实验
  5. 第十篇:扩展SOUI的控件及绘图对象(ISkinObj)
  6. VMware Workstation Pro安装
  7. VMware Workstation的安装
  8. 计算机定时关机计划任务失败,如何设置定时关机任务?电脑设置定时关机任务方法...
  9. 初识深度信念网络DBN
  10. [每日一氵] openCV resize函数直接按比例缩放