- 浏览: 321510 次
- 性别:
- 来自: 上海
文章分类
最新评论
❑ DOM的核心: Node
由于DOM是树形结构,所以一个节点被抽象为对象Node,这是DOM的核心对象:
Node的种类一共有12种,通过Node.nodeType的取值来确定(为1-12),分为:
Node.ELEMENT_NODE (1) Node.ATTRIBUTE_NODE (2) Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本,它没有子节点 Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode Node.ENTITY_REFERENCE_NODE (5) Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>,无子节点 Node.PROCESSING_INSTRUCTION_NODE (7) //PI,无子节点 Node.COMMENT_NODE (8) Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点 Node.DOCUMENT_TYPE_NODE (10) //DTD,<!DOCTYPE………..> Node.DOCUMENT_FRAGMENT_NODE (11) Node.NOTATION_NODE (12) //DTD中的Nation定义
❑ Node接口包含的特性/方法
节点的属性
nodeName 属性将返回一个字符串,其内容是给定节点的名字。如果节点是元素节点,返回这个元素的名称;如果是属性节点,返回这个属性的名称;如果是文本节点,返回一个内容为#text 的字符串;
nodeType 属性将返回一个整数,这个数值代表给定节点的类型
nodeValue 属性将返回给定节点的当前值.如果节点是元素节点,返回null;如果是属性节点,返回这个属性的名称;如果是文本节点,返回文本节点的内容;
ownerDocument 指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象;仅用于Element节点
childNodes 所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
nextSibling 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
previousSibling 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
parentNode 返回一个给定节点的父节点
❑ hasChildNodes() 当childNodes包含一个或多个节点时,返回真
❑ appendChild(node) 将node添加到childNodes的末尾
❑ removeChild(node) 将node从childNodes中删除
❑ insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode
var container = document.getElementById("content"); var message = document.getElementById("fineprint"); var para = document.createElement("p"); container.insertBefore(para,message);
❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode
var container = document.getElementById("content"); var message = document.getElementById("fineprint"); var para = document.createElement("p"); container.replaceChild(para,message);
❑ 获得Node:
/* 通过document对象 */ var oHtml = document.documentElement; /* 得到<head />和<body /> */ var oHead = oHtml.firstChild; var oBody = oHtml.lastChild; /* 可以用这种方式 */ var oHead = oHtml.childNodes[0]; var oBody = oHtml.childNodes[1]; /* 也可以使用方法获取数组的索引值 */ var oHead = oHtml.childNodes.item(0); var oBody = oHtml.childNodes.item(1); /* 使用document.body来得到<body /> */ var oBody = document.body;
❑ createElement(element)
创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);
❑ createTextNode()
创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
var message = document.createTextNode("hello world"); var container = document.createElement("p"); container.appendChild(message); document.body.appendChild(container);
❑ cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本,参数为 true 或者 false,true 表示同时复制该节点的子节点,false 则不复制任何子节点。
var para = document.createElement("p"); var message = document.createTextNode("hello world"); para.appendChild(message); document.body.appendChild(para); var newpara = para.cloneNode(true); document.body.appendChild(newpara);
❑ 检测节点类型
通过使用nodeType特性检验节点类型:
alert(document.nodeType); //outputs "9"
alert(document.documentElement.nodeType); //outputs "1"
这个例子中,document.nodeType返回9,等于Node.DOCUMENT_NODE;同时document. documentElement.nodeType返回1,等于Node.ELEMENT_NODE。
也可以用Node常量来匹配这些值:
alert(document.nodeType == Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true
这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量,所以这些代码在IE上会产生错误。
❑ 处理特性
即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有Element节点才能有特性。
Element节点的attributes属性其实是NamedNodeMap,它提供一些用于访问和处理其内容的方法:
getNamedItem(name) 返回nodeName属性值等于name的节点;
removeNamedItem(name) 删除nodeName属性值等于name的节点;
setNamedItem(node) 将node添加到列表中,按其nodeName属性进行索引;
item(pos) 像NodeList一样,返回在位置pos的节点;
请记住这些方法都是返回一个Attr节点,而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。
当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,它的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。
例如,假设有这样一个元素:
<p id="p1" style="color:red">hello world!</p>
假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:
var sId = oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId = oP.attributes.item(0).nodeValue;
还可以通过给nodeValue属性赋新值来改变id特性:
oP.attributes.getNamedItem("id").nodeValue = "newId";
Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性,并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。
因为这个方法有些累赘,DOM又定义了三个元素方法来帮助访问特性:
getAttribute(name) 等于attributes.getNamedItem(name).value;
setAttribute(name, newvalue) 等于attribute.getNamedItem(name).value = newvalue;
removeAttribute(name) 等于attributes.removeNamedItem(name)
要获取前面用的<p/>的id特性,只需这样做:
var sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id", "newId");
❑ setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性
❑ getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。
❑ getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素,返回一个元素节点
❑ getElementsByName()
用来获取所有name特性等于指定值的元素:
elements = document.getElementsByName(tagName)
返回一个节点集合。
❑ getElementsByTagName()
用于寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName)
返回一个节点集合。
❑ 生成与操作Node
createAttribute(name) :创建一个名为name的属性节点。
createCDATASection(text) :创建一个子节点为text的CDATA区。
createComment(text) :创建一个注释内容为text的注释节点。
createDocumentFragment() :创建一个文档片断(fragment)节点。
createElement(tagName) :创建一个名为tagName的元素节点。
createEntityReference(name) :Creates an entity reference node with the given name。
createProcessingInstruction(target, data) :Creates a PI node with the given target and data。
createTextNode(text) :创建一个包含text的文本节点。
其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。
/*使用createElement(),createTextNode(),appendChild()动态添加节点*/ function createMessage(){ var op = document.createElement("p"); var oText = document.createTextNode("hello world!"); op.appendChild(oText); document.body.appendChild(op); }
❑ 使用createDocumentFragment()
//通常做法 var arrText = ['first', 'second', 'third']; for(var i=0; i<arrText.length; i++){ var op = document.createElement('p'); var oText = document.createTextNode(arrText[i]); op.appendChild(oText); document.body.appendChild(op); } //使用documentFragment var arrText = ['first', 'second', 'third']; var oFragment = document.createDocumentFragment(); for(var i=0; i<arrText.length; i++){ var op = document.createElement('p'); var oText = document.createTextNode(arrText[i]); op.appendChild(oText); oFragment.appendChild(op); } document.body.appendChild(oFragment);
通过DocumentFragment的方式效率更高。
❑ HTML DOM:
使用DOM的核心方法是针对所有XML的,针对HTML DOM有特殊的方法,如
使用DOM core:oImg.setAttribute("src", "picture.gif");
使用HTML DOM:oImg.src = "picture.jpg";
附件是javascript dom 手册,可以方便查阅
- jsdom_all.rar (193.8 KB)
- 下载次数: 2021
评论
[*]
谢谢楼主啦!!辛苦了!!!!
发表评论
-
如何去掉链接虚线框
2011-10-08 13:58 1646链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用 ... -
Javascript获得当前地址栏url
2011-02-24 10:36 1350URL即:统一资源定位符 (U ... -
文字滚动
2009-10-24 09:51 1310三种文字滚动效果: 向上滚动 类似marque ... -
会动的眼睛
2009-07-09 23:31 1614<style type="text/css ... -
页面输出时一些常用的小技巧(二)
2009-05-16 22:42 1230页面输出时一些常用的 ... -
keycode值和chr码值
2009-01-09 14:44 2390keycode 8 = BackSpace BackSp ... -
展示图片的例子1
2008-12-01 17:08 1376很炫的展示图片的效果,用纯javascript写的,逻 ... -
二级菜单事件
2008-11-19 23:34 1066<!DOCTYPE html PUBLIC " ... -
删除空白子节点
2008-11-19 20:57 1751<!DOCTYPE html PUBLIC " ... -
分页效果
2008-04-17 18:40 1435还不错的分页效果,暂时用不上,收藏一下,见附件 -
动画效果打开关闭图层
2008-04-16 13:45 1734<html xmlns="http://www ... -
很炫的图片循环效果
2008-04-16 10:49 3802<!DOCTYPE HTML PUBLIC " ... -
实用的js动画
2008-04-03 17:06 3760<!DOCTYPE html PUBLIC " ... -
用js给input传值
2008-03-27 18:06 5405<style> #name{ float:left ... -
常用js语句——大全
2008-03-16 17:02 28781.document.write(""); ... -
用javascript来充实文档的内容
2008-03-06 18:35 1584<!DOCTYPE html PUBLIC " ... -
javascript美术馆改进版
2008-03-04 14:31 2002<!DOCTYPE html PUBLIC " ... -
javascript美术馆
2008-02-29 15:56 1258<!DOCTYPE html PUBLIC " ... -
js日历
2008-02-26 22:32 1576<html> <head> <t ... -
javascript的IE和Firefox兼容性问题
2008-02-25 22:12 1269以 IE 代替 Internet Explorer,以 MF ...
相关推荐
一个基于JS的数据驱动的节点式编排组件库 特性 丰富DEMO,开箱即用 全方位管理画布,开发者只需要更专注定制化的需求 利用DOM/REACT/VUE来定制元素;灵活性,可塑性,拓展性优秀
1.访问相关的节点 2.检测节点类型(nodeType) 3.处理特性 4.访问指定节点 5.创建和操作节点
一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document...
在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Model),文档对象模型。 是W3C组织推荐的处理可扩展标记语言(HTML或者XML)...
DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 Item 1 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。...
JavaScript 1.8.5 英文第八章 DOM操作其他文档特性
如何实现JavaScript中缺失的面向对象特性,如对象的私有成员与私有方法;如何应用适当的编程模式,发挥JavaScript语言特有的优势;如何应用设计模式解决常见问题等。 《JavaScript面向对象编程指南》着重介绍...
如何实现JavaScript中缺失的面向对象特性,如对象的私有成员与私有方法;如何应用适当的编程模式,发挥JavaScript语言特有的优势;如何应用设计模式解决常见问题等。, 《JavaScript面向对象编程指南》着重介绍...
书中较全面地对 JavaScript 的各种函数以及特性作了介绍,而后面占了全书超过一半内容的 JavaScript 核心参考、客户端 JavaScript 参考、DOM 参考,无疑是编写 JavaScript 时最有力的参考手册。">本书是 JavaScript ...
JavaScript作为一门浏览器语言的核心思想;...如何实现JavaScript中缺失的面向对象特性,如对象的私有成员与私有方法;如何应用适当的编程模式,发挥JavaScript语言特有的优势;如何应用设计模式解决常见问题等。
第Ⅲ部分“测试和编写高级JavaScript特性”描述了如何使用和测试 JavaScript语言更高级的特性。 第Ⅳ部分“测试中的特殊主题”提供了测试DOM操作的样例,还演示了用于增 强代码标准的静态分析工具的使用。第Ⅴ部分...
如何在blink中使用Javascript而不是C++来实现DOM特性,请参考这篇文档。使用js实现DOM特性,具有很大的灵活性,同时能够保持内核精简。
示例描述:介绍JavaScript的面向对象特性。 4.1.html 对象的创建。 4.2.html 作为关联数组的对象与数组对象实现方式比较。 4.3.html prototype的用法。 4.4.html prototype实现继承机制。 4.5....
依次介绍了JavaScript的发展历史、基础性话题(变量、数据类型、数组、循环以及条件表达式)、函数、对象、原型、继承的实现、BOM和DOM等。附录部分包括了学习JavaScript编程常用的参考资源。尤其值得一提的是,本书...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...