JS基础DOM篇之二:DOM级别与节点层次?
Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。那下面就介绍一下这存在的三个级别。
Core)和DOM HTML。其中,DOM核心规定的是如何映射基于XML的文档结构,以便简化对文档中任意部分的访问和操作。DOM
HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。总的来说DOM1级的主要目标是映射文档的结构,并提供查询的接口。
Style Sheets,层叠样式表)的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。
DOM2级引入了下列新模块,也给出了众多新类型和新接口的定义。
DOM视图(DOM Views):定义了跟踪不同文档(例如,应用CSS之前和之后的文档)视图的接口;
DOM事件(DOM Events):定义了事件和事件处理的接口;
DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口;
DOM遍历和范围(DOM Traversal and Range):定义了遍历和操作文档树的接口。
DOM3级则进一步扩展了DOM,引入了以统一方式加载和保存文档的方法——在DOM加载和保存(DOM Load and
Save)模块中定义;新增了验证文档的方法——在DOM验证(DOM
Validation)模块中定义。DOM3级也对DOM核心进行了扩展,开始支持XML 1.0规范,涉及XML Infoset、XPath和XML
Base。
2.节点层次
我们知道DOM可以将任何HTML或Xml文档描绘成一个由多层节点构成的以特定节点为根节点的树形结构。这些节点分为不同类型,每种类型分别表示文档中不同的信息。每个节点都拥有各自的特点、数据、方法,切合其他节点也存在关系。他们之间的关系就构成了节点层次。
- Node.ELEMENT_NODE (1)
- Node.ATTRIBUTE_NODE (2)
- Node.TEXT_NODE (3)
- Node.CDATA_SECTION_NODE (4)
- Node.ENTITY_REFERENCE_NODE(5)
- Node.ENTITY_NODE (6)
- Node.PROCESSING_INSTRUCTION_NODE (7)
- Node.COMMENT_NODE (8)
- Node.DOCUMENT_NODE (9)
- Node.DOCUMENT_TYPE_NODE (10)
- Node.DOCUMENT_FRAGMENT_NODE (11)
- Node.NOTATION_NODE (12)
通过将noseType属性与数字之比较很容易确定节点类型。
if(somenode.nodeType==1){
alert("Node is an element")
}
但是要注意比不是所有节点类型都受到web浏览器的支持。我们最常用的就是元素和文本节点。具体的节点类型介绍就不一一展开,有兴趣的可以参看“小红书”第十章自行了解。接下来看一下我认为比较常用的节点类型。
Document类型
我们大家需要知道JavaScript是通过Document类型来表示HTML页面或者其他基于XML文档。还有就是在浏览器中,document对象是HTMLDocument(它继承自Document类型)的一个实例,用来表示整个HTML页面。而且document对象是window对象的一个属性,因此可以将它做为全局对象来访问,通过这个文档对象不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。
文档信息
document对象有一些标准的Document对象所没有的属性,提供了 document对象所表现的网页的一些信息。
//取得文档标题 var title = document.title;
//设置文档标题 document.title = "New page title";
//取得完整的URL var url = document.URl;
//取得域名 var domain = document.domain;
//页面上边距 document.body.leftMargin
//页面左边距 document.body.rightMargin
//页面右边距 document.body.bottomMargin
//页面下边距 document.body.background //背景图片
查找元素
Document类型提供两个查找元素的方法:
getElementById()
,如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。getElementByTagName()
,返回包含零或多个元素的NodeList,在HTMl文档中,这个方法会返回一个HTMLCollection对象,与NodeList非常类似。其中THMLCollection对象有一个方法namedItem()getElementsByName()
,会返回带有给定name特性的所有元素。
文档写入
document.write()方法可以用在两个方面:
- 页面载入过程中用实时脚本创建页面内容
- 用延时脚本创建本窗口或新窗口的内容
只有当页面被加载的时候document.write()函数才会被执行
doucment.writeln()与上述类似,区别在于换行。
open()和close()分别用于打开和关闭网页的输出流,如果在页面加载期间使用write(),则不需要用这两个方法。
Element类型
除了Document类型之外,Element类型基本上要算是web变成中最常用的类型了。Element类型用于表现XML或者HTML元素,提供了对元素标签名、子节点及特性的访问。
元素标签名访问
要访问元素的标签名,可以用 nodeName
属性,也可以用 tagName
属性;这两个属性会返回相同的值。在 HTML 中,标签名始终都以全部大写表示,而在 XML(有时候也包括 XHTML)中,标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是在比较之前将标签名转换成相同的大小写形式:
var myDiv = document.querySelector('div');
console.log(myDiv.tagName); // DIV
console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
// ...
}
子节点访问
<ul id='myUl'>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul> <script>
var myUl = document.getElementById('myUl');
console.log(myUl.childNodes.length); // IE: 3 其他浏览器: 7
</script>
以上代码,如果是 IE 来解析,那么 <ul>
元素会有 3 个子节点,分别是 3 个 <li>
元素;而如果是其他浏览器解析,则会有 7 个子节点,包括 3 个 <li>
元素 和 4 个文本节点。
如果像下面这样将元素之间的空白符删除,那么所有浏览器都会返回相同数目的子节点:
<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script>
var myUl = document.getElementById('myUl');
console.log(myUl.childNodes.length); // 所有浏览器: 3
</script>
特性的访问
每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是 getAttribute()
setAttribute()
removeAttribute()
。
注意,传递给 getAttribute()
的特性名与实际的特性名相同,因此要想得到 class
特性值,应该传入 class
而不是 className
,后者只有在通过对象属性(property)访问特性时才用。如果给定名称的特性不存在,getAttribute()
返回 null。
<div id='myDiv' title='hanzichi'> </div>
<script>
var myDiv = document.querySelector('div'); // attribute
console.log(myDiv.getAttribute('id')); // myDiv
console.log(myDiv.getAttribute('class')); // null
console.log(myDiv.getAttribute('title')); // hanzichi
console.log(myDiv.getAttribute('lang')); // null
console.log(myDiv.getAttribute('dir')); // null // property
console.log(myDiv.id); // myDiv
console.log(myDiv.className); // ''
console.log(myDiv.title); // hanzichi
console.log(myDiv.lang); // ''
console.log(myDiv.dir); // ''
</script>
通过 getAttribute() 方法也可以取得自定义特性。
在实际开发中,开发人员不常用 getAttribute()
,而是只使用对象的属性(property)。只有在取得自定义特性值的情况下,才使用 getAttribute()
方法。为什么呢?比如说 style
,在通过 getAttribute()
访问时,返回的 style
特性值包含的是 css 文本,而通过属性来访问会返回一个对象。再比如 onclick
这样的事件处理程序,当在元素上使用时,onclick
特性包含的是 Javascript 代码,如果通过 getAttribute()
访问,将会返回相应代码的字符串,而在访问 onclick
属性时,则会返回 Javascript 函数。
与 getAttribute()
对应的是 setAttribute()
,这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()
会以指定的值替换现有的值;如果特性不存在,setAttribute()
则创建该属性并设置相应的值。
而 removeAttitude()
方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。
div.setAttribute('id', 'someOtherId');
div.setAttribute('title', 'some other text'); div.removeAttribute('class')
唉,原本打算将DOM系列洋洋洒洒来几篇,越写越发现自己肚里没东西。据说要想写出个100字左右的博文,你得有1000字左右的知识储备。看来我现在继续充电完善自己,等感觉自己能继续驾驭这个题目时再来继续这个系......
JS基础DOM篇之二:DOM级别与节点层次?的更多相关文章
- JS基础入门篇(二十七)—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- JS基础入门篇(二十四)—DOM(下)
1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...
- JS基础入门篇(二十四)—DOM(上)
1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...
- JS基础入门篇(二十)—事件对象以及案例(二)
案例一.点击按钮,选中input中的全部内容 select()方法:选中全部. 点击按钮选中输入框中的内容!!!! <!DOCTYPE html> <html lang=" ...
- JS基础入门篇(三十五)—面向对象(二)
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- jQuery基础修炼圣典—DOM篇(二)jQuery遍历
1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...
- jquery基础学习之DOM篇(二)
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...
- JS基础速成(三)- DOM(文件对象模型)
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...
随机推荐
- sql server删除数据后空间无变化处理方法
删除数据库表 第一步: 执行 delete from doc.115sou.com #删除数据,执行效率低 drop table doc.115sou.com #删除表 ...
- 把 HttpHandler.ashx 修改为 异步编程 异步操作
在 ASP.NET 中,所有的处理程序类必须实现 IHttpHandler 接口或者实现 IHttpAsyncHandler 接口,这两个接口的区别是前者是一个同步接口,后者是一个异步处理模式的接口. ...
- [反汇编练习] 160个CrackMe之018
[反汇编练习] 160个CrackMe之018. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- [反汇编练习] 160个CrackMe之002
[反汇编练习] 160个CrackMe之002. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- cocos2d-x中的Jni使用(C++与Andriod方法互调)
作者:何卫 转载请注明,原文链接:http://www.cnblogs.com/hewei2012/p/3376616.html 前提条件: 1.操作的游戏工程和cocos2d_x游戏引擎是一个目录的 ...
- 域名下Web项目重定向出现DNS域名解析错误问题
问题: 项目使用的是阿里云的ESC,前几天为IP地址添加了域名 发现发送正常请求时跳转没问题,但发送重定向请求时,页面就会出现DNS域名解析错误的情况 1.我在Tomcat的server.xml中配置 ...
- [转] C#实现自动化Log日志
qing2005原文地址 C#实现自动化Log日志 在开发项目的时候,我们不免要使用Log记录日志,使用最多的是Log4Net和EntLib Log,在需要记录日志的代码处加入log.Write(日志 ...
- WebForm+Web.config: 超时时间已到。在操作完成之前超时时间已过或服务器未响应。
ylbtech-Error-WebForm+Web.config: 超时时间已到.在操作完成之前超时时间已过或服务器未响应. 超时时间已到.在操作完成之前超时时间已过或服务器未响应. 1.A,错误代码 ...
- HDU 5278 PowMod 数论公式推导
题意:中文题自己看吧 分析:这题分两步 第一步:利用已知公式求出k: 第二步:求出k然后使用欧拉降幂公式即可,欧拉降幂公式不需要互质(第二步就是BZOJ3884原题了) 求k的话就需要构造了(引入官方 ...
- <Chapter 2>2-1-2.安装Java SDK
Java运行时环境的App Engine SDK运行在任何运行了Java SE开发工具(JDK)的电脑上.Java SDK App Engine 支持JDK 6,并且当运行App Engine的时候, ...