DOM简单内容

最新推荐文章于 2023-09-05 09:26:32 发布

iteye_13705

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量153

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13705/article/details/82680077

版权

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')

上面这个例子表示我们可以吧获得的标签列表全部以数组的形式存在一个变量 a 中，然后就能通过索引来获取相应的元素，于是在js文件中添加forEach、length、或者lodash之类的函数方法就可以对此列表进行访问。

同时还有parentNode，firstChild，lastChild三个属性，遵循文档结构，移动到符合要求的节点处。

var a = document.getElementsById('sp');
a.parentNode.removeChild('b')

此段代码会先获取id为sp的元素，然后移至它的父节点处，执行removeChild（）方法。

DOM组件可以访问页面中的任何元素（甚至包括注释和空白），而与之相对的js所能访问的内容只局限于HTML中的一些元素，例如以下集合对象：

document.images 等价于 Core DOM组件中的document .getElementsByTagName('img')
document.applets 等价于 document.getElementsByTagName('applets')
document.links      是一个列表，包含了页面中的所有含有href属性的  a  标签
document.anchors 包含了页面中的所有含有name属性的  a  标签
document.forms  使用最广泛，这是一个所有  form  标签的列表，例如访问页面中第一个  form  
元素可以document.form[0]

forms 集合中包含了一系列的input 字段和按钮，可以通过该对象的elements属性访问它们如页面中第一个form元素中的第一个input字段：

document.forms[0].elements[0]

最后，本菜在制作页面中遇到网页跳转问题时，尝试的一种函数方法：（由于尚有其他问题未解决因此不能判断方法正确性）

var obj = document.getElementsById('待处理')
obj.onclick = function(){
       windows.location.href('www.asdfg.com')
}

iteye_13705

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫