`
yanxiaohui5522
  • 浏览: 59222 次
  • 来自: ...
社区版块
存档分类
最新评论

DOM精简教程

阅读更多
先来看一张简单的文档树

很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:
NodeA.firstChild = NodeA1
NodeA.lastChild = NodeA3
NodeA.childNodes.length = 3
NodeA.childNodes[0] = NodeA1
NodeA.childNodes[1] = NodeA2
NodeA.childNodes[2] = NodeA3
NodeA1.parentNode = NodeA
NodeA1.nextSibling = NodeA2
NodeA3.previousSibling = NodeA2
NodeA3.nextSibling = null
NodeA.lastChild.firstChild = NodeA3a
NodeA3b.parentNode.parentNode = NodeA

DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。
insertBefore()--在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。
replaceChild()--在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。
removeChild()--从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。
appendChild()--添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。
cloneNode()--创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。

为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:
getElementById()
getElementsByTagName()
createElement()
createAttribute()
createTextNode()
注意:在一个页面中只有一个文档对象,除了getElementsByTagName()外,其它方法均只能通过document.methodName()调用。

再看一下下面这个例子:
<html>
<head>
<title></title>
</head>
<body>
<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.documentElement.lastChild.firstChild.tagName);
//-->
</SCRIPT>
</body>
</html>
结果将会显示"P",下面是一些解释
document.documentElement - gives the page's HTML tag.
lastChild - gives the BODY tag.
firstChild - gives the first element in the BODY.
tagName - gives that element's tag name, "P" in this case.
另一个:
<html>
<head>
<title></title>
</head>
<body>

<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.documentElement.lastChild.firstChild.tagName);
//-->
</SCRIPT>
</body>
</html>
这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在NS中,会自动为空行加上一个节点所以返回值是"undefined",而在IE中将跳过空行仍然指向P标签。

更常用的方法:
<p >This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").tagName);
这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的ID号是唯一的就可以了。

接下来一种访问元素节点的方法是document.getElementsByTagName(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接:
var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i++)
nodeList[i].style.color = "#ff0000";

attribute和attributes
attribute对象和元素相关,但是却没有被认为是文档树的一部分,因此属性不能作为子节点集合的一部分来使用。
有三种方法可以为元素建立新的属性
1.
var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);
2.
var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");
3.
var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";
你可以在html标签种定义自己的属性:
<p myAttribute="myValue">This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").getAttribute("myAttribute"));
返回值将是"myValue".但是请注意这里必须使用getAttribute,而不是AttributeName,因为有一些浏览器并不支持自定义属性。

attributes也可以被轻易的从一个元素中删除,你可以使用removeAttribute()或者将element.attributeName指向一个null值。
通过attributes我们就可以产生一些动态效果:
<p align="left">Text in a paragraph element.</p>
... code for the links ...
document.getElementById('sample1').setAttribute('align', 'left');
document.getElementById('sample1').setAttribute('align', 'right');
另一种:
<p style="text-align:left;">Text in a paragraph
element.</p>
... code for the links ...
document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';
跟上面的例子一样,展示了可用通过元素修改style中的属性,甚至是class中的.唯一要提到的是textAlign是从style中的text- align中演变而来的,有一条基本规律,就是style中的属性如果出现-则在dom中将会被去掉并且随后的一个字母将改为大写,还有一点就是如果即使元素中没有style属性,上述例子同样可以使用。

text nodes:
先看一下例子:
<p >This is the initial text.</p>
... code for the links ...
document.getElementById('sample1').firstChild.nodeValue =
'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue =
'...in a galaxy far, far away';
首先text nodes并没有像elements那样具有id属性,所有它并不能直接通过document.getElementById()或者document.getElementsByTagName()访问
看一下下面的结构也许会更明白一些:

可以看出通过document.getElementById('sample1').firstChild.nodeValue就可以读取或者设置text nodes的值了。

另一个更加复杂一点的例子:
<p >This is the <b>initial</b> text.</p>
它的文档结构

在这里通过document.getElementById('sample1').firstChild.nodeValue讲仅仅改变"This is the"
而initial text.将不会改变.在这里大家应该看到了它和innerHTML的不同了.当然你也可以这样用:
document.getElementById('sample3').firstChild.nodeValue =
'<b>Once</b> upon a time...';
document.getElementById('sample3').firstChild.nodeValue =
'...in a galaxy <i>far, far</i> away';
其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示。

创建和删除text nodes:
var myTextNode = document.createTextNode("my text");
通过上面的代码你可以创建一个新的text node,但是它并不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为
text nodes不能有儿子,所以你不能将它加入到一个text nodes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elements nodes
了,以下的例子展示了如何添加和删除一个text node:
<p >Initial text within a paragraph element.</p>
... code to add a text node ...
var text = document.createTextNode(" new text " + (++counter1));
var el = document.getElementById("sample1");
el.appendChild(text);
... code to remove the last child node ...
var el = document.getElementById("sample1");
if (el.hasChildNodes())
el.removeChild(el.lastChild);
增加文本是很容易的,上面的代码建立了一个新的text node并且通过appendChild()方法将其加入到childNodes数组的末尾,并设置了一个counter1的全局变量,利于观察
hasChildNodes()的返回值是true or false;用来判断当前节点是否还有child,以阻止当其没有child的时候调用removeChild()产生的错误。

创建element nodes
有了上面的基础,应该更容易理解了,先看一下下面的代码
<div >This text is in a DIV element.</div>
... code for the link ...
var paraEl, boldEl;
paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text added to the DIV"));
document.getElementById("sample1").appendChild(paraEl);
你还可以直接为新加的element nodes设置attribute,以下两种都可以:
boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);
或者:
paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";
分享到:
评论

相关推荐

    DOM 精简知识教程

    DOM 精简知识教程

    精简XML编程基础教程

    本教程旨在帮助初学者理解XML的基础概念,掌握其语法特性,并能进行基本的XML编程。 一、XML的基本概念 XML设计的目标是传输和存储数据,而非显示数据,这与HTML(超文本标记语言)的主要用途——呈现数据有着明显...

    jQuery1.6.2包(精简的和没有精简的)

    1. **选择器增强**:jQuery 1.6.2 包含了 CSS3 选择器的支持,使得开发者可以使用更复杂、更强大的选择器语法来定位DOM元素。 2. **属性操作**:这个版本引入了 `.attr()` 和 `.prop()` 方法的区分。`.attr()` 用于...

    jQuery v1.3 含(完整版&amp;精简版)

    10. **学习资源**:对于初学者,可以通过官方文档、在线教程、书籍等方式学习jQuery,理解其基本概念和用法,提升开发效率。 总之,jQuery v1.3版本是一个功能强大的JavaScript库,它的易用性和广泛的社区支持使其...

    Hibernate3.3.2_Java例子精简JAR包

    本例子通過學習“002_尚学堂马士兵_Java视频教程_Hibernate3.3.2_HelloWorld.avi”教程實踐的小例子。 整理出来的精简JAR包,共八个。分别: antlr-2.7.6.jar、commons-collections-3.1.jar、dom4j-1.6.1.jar、...

    精简教程

    【Svelte:轻量级前端框架的精简教程】 Svelte 是一个新兴的前端JavaScript框架,以其极小的体积和高效的编译时优化而受到开发者们的喜爱。它将复杂的UI逻辑在构建时转换为高性能的原生JavaScript,使得在运行时的...

    datepicker精简版

    标题中的"datepicker精简版"指的是一个特定的...总的来说,"datepicker精简版"是一个专注于提供简单日期选择功能的组件,通过博客文章中的教程和提供的代码资源,开发者可以学习并应用到自己的项目中,提高用户体验。

    一个精简的jquery生成tree例子

    总之,这个"一个精简的jquery生成tree例子"是一个介绍如何使用jQuery轻松创建树形结构的教程。通过理解并实践这个例子,开发者可以学习到如何利用jQuery进行DOM操作,处理用户交互,并从数据中构建动态的HTML结构。

    tinyvue一个非常精简的vuejs的实现

    "非常精简" 表示 TinyVue 保留了 Vue.js 的核心特性,但去除了不必要的复杂性,适合学习Vue.js的基本原理或者进行轻量级项目开发。 **描述解读:** 描述中提到的 "8 小时实现自己的迷你版vuejs" 暗示这是一个教程,...

    JS 精简的实用的视频资源

    这个“JS精简的实用的视频资源”显然是一份专为初学者设计的教程,旨在短时间内教授JavaScript的基础知识和实用技巧。 视频的第一部分是“01.JavaScript基础 36集”,这意味着它将涵盖JavaScript的基本概念,包括但...

    网站设计基础与实例教程

    教程将涵盖图片压缩、代码精简、缓存策略和CDN(内容分发网络)等方法。 6. **SEO与无障碍设计**:搜索引擎优化(SEO)能帮助网站在搜索结果中获得更好的排名。教程会讲解关键词策略、元标签、内部链接等SEO技巧。...

    JQuery入门教程指南 CHM

    3. **版本选择**: jQuery有多个版本,包括精简版(jQuery.min.js)和完整版(jQuery.js),开发者可以根据需求选择。 4. **兼容性**: jQuery致力于浏览器兼容性,能在多种浏览器环境下良好运行,减少了跨浏览器开发...

    个性暗音乐播放精简版

    【标题】"个性暗音乐播放精简版"与【描述】"个性暗音乐播放精简优化版" 提供的信息表明,这是一个针对音乐播放器的项目,具有独特的暗色主题,并且经过了精简和优化,可能更加注重用户体验和性能效率。这个音乐...

    前端开源图表库ECharts精简实用教程

    在页面中,你需要先创建一个具有宽度和高度的DOM元素作为ECharts图表的容器,然后通过`echarts.init()`方法初始化ECharts实例。以下是一个简单的示例: ```html ;height:400px;"&gt; ``` ```javascript var myChart = ...

    最新系统分析师考试复习资料(精简整理版).pdf

    - **DOM (Document Object Model)**:将 XML 文档视为一个树形结构,允许程序遍历和修改文档。 - **SAX (Simple API for XML)**:是一种基于事件驱动的解析方式,适用于大型文档。 - **SAX 事件**:解析过程中会...

    dojo英文教程

    - Dojo提供了多种不同的构建版本,包括完整版、精简版等。开发者需要根据项目的实际需求来选择最合适的版本。 - **3.2 动态加载组件** - Dojo支持按需加载组件,这意味着只有当某个组件被实际使用时才会加载,从而...

    vue入门教程.docx

    ### Vue.js 入门教程详解 #### 一、Vue.js 简介 **定义**: - **Vue.js**是一款用于构建用户界面的渐进式JavaScript框架。 - **自底向上**的应用方式使得Vue能够逐步集成到现有项目中,而不仅仅局限于新建项目。 -...

Global site tag (gtag.js) - Google Analytics