DOM简单内容

       DOM:文档对象模型,当前载入页面(文档)所拥有的对象。是由世界万维网联合协会(W3C)制定,并且拥有多个不同版本(level)。如今最新的是 DOM level 3。现在浏览器基本上都完全实现了level 1。而DOM出现之前的个浏览器访问文档的实现现在意义上标志为level 0,并且部分也被写入了level 1,其他则作为部分浏览器的特性。通过JavaScript对页面的元素进行添加、移动、改变或移除的方法和属性, 都是DOM提供的。

       另外,BOM是浏览器对象模型,页面以外事物(浏览器窗口和桌面屏幕)所拥有的对象。并不属于标准化组件,而是与level 0 相似一部分对象集得到了所有主流浏览器的支持,而另一部分则属于浏览器特性。

       DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,是一种处理HTML文档的常用方法,它的设计是以对象管理组织(OMG)的规约为基础,同时是一套语言独立的应用程序接口(API),因此可用于任何编程语言,可用于让js文件在浏览期间移植的方法,但实际上它可以使用户页面动态变化可以动态显示或隐藏或增加删除元素、改变元素的属性。

       根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点,整个文档是一个文档节点;每个 HTML 元素是元素节点;HTML 元素内的文本是文本节点;每个 HTML 属性是属性节点;注释是注释节点。通过DOM所有节点都可以通过js访问。简而言之,DOM是一种能将HTML文档解析成树形节点的方法。

<html>
       <head>
              <title>POS机-web版</title>
       </head>
       <body>
              <h1></h1>
              <p></p>
       </body>
</html>

 

       上述代码中head节点可以看做title节点的父节点(先辈节点),相对的title便是它的子节点,而title节点也有一个子节点:文本节点 ‘ POS机-web版 ,而head节点的父节点就是html节点(同时HTML也是根节点),body和head、h1和p都是同辈兄弟节点(?同级节点)。

       getElementById()和getElementByTagName()两个方法便可以用来访问所有HTML节点,这两种方法忽略HTML文档结构返回需要的元素,直接通过节点的id或标签名称属性查找,而tagname方法会返回一个包含所有要求标签的列表。

document.getElementsById(‘POS’).getElementsByTagName('p')

        上面这个例子会返回HTML文件中所有id是POS的p标签。

       (PS: 可以通过节点的innerHTML属性访问文本节点的值。)

var a = document.getElementsByTagName('p')

相关推荐