威尼斯www.9778.com-威尼斯正版官方网站

比较详细的javascript DOM 学习笔记第1/2页_javascript技巧_脚本之家

日期:2019-12-25编辑作者:服务器&运维

DOM添加元素,使用节点属性

元素(你应该明白这是该文件的document元素),你可以使用document的documentElement特性:var oHtml = document.documentElement;现在变量oHtml包含一个表示的HTMLElement对象。如果你想取得

createDocumentFragment()一旦把节点添加到document.body中,页面就会更新并反映出这个变化。对于少量的更新,这是很好的,然而,当要向document添加大量数据时,如果逐个添加这些变动, 这个过程有可能会十分缓慢。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中,假如 想创建十个新段落复制代码 代码如下:

Hello world!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document一样来保存其他节点。Element--表示起始标签和结束标签之间的内容,例如或者。这是唯一可以同时包含特性和子节点的节点类型。Attr--代表一对特性名和特性值。这个节点类型不能包含子节点。Text--代表XML文档中的在起始标签和结束标签之间,或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。CDataSection--的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。Entity--表示在DTD中的一个实体定义,例如。这个节点类型不能包含子节点。EntityReference--代表一个实体引用,例如"。这个节点类型不能包含子节点。ProcessingInstruction--代表一个PI。这个节点类型不能包含子节点。Comment--代表XML注释。这个节点不能包含子节点。Notation--代表在DTD中定义的记号。这个很少用到。Node接口定义了所有节点类型都包含的特性和方法。特性/方法类型/返回类型说明nodeNameString节点的名字;根据节点的类型而定义nodeValueString节点的值;根据节点的类型而定义nodeTypeNumber节点的类型常量值之一ownerDocumentDocument指向这个节点所属的文档firstChildNode指向在childNodes列表中的第一个节点lastChildNode指向在childNodes列表中的最后一个节点childNodesNodeList所有子节点的列表previousSiblingNode指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为nullnextSiblingNode指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为nullhasChildNodes()Boolean当childNodes包含一个或多个节点时,返回真attributesNamedNodeMap包含了代表一个元素的特性的Attr对象;仅用于Element节点appendChildNode将node添加到childNodes的末尾removeChildNode从childNodes中删除nodereplaceChildNode将childNodes中的oldnode替换成newnodeinsertBeforeNode在childNodes中的refnode之前插入newnodd除节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分。NodeList--节点数组,按照数值进行索引;用来表示和一个元素的子节点。NamedNodeMap--同时使用数值和名字进行索引的节点表;用于表示元素特性。2.访问相关的节点下面的几节中考虑下面的HTML页面复制代码 代码如下:

DOMExample

removeChild() Example

同时,假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:var sId = oP.attributes.getNamedItem.nodeValue;当然,还可以用数值方式访问id特性,但这样稍微有些不直观:var sId = oP.attributes.item.nodeValue;还可以通过给nodeValue属性赋新值来改变id特性:oP.attributes.getNamedItem.nodeValue="newId";Attr节点也有一个完全等同于nodeValue属性的value属性,并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。因为这个方法有些累赘,DOM又定义了三个元素方法来帮助访问特性:getAttribute--等于attributes.getNamedItem.value;setAttribute--等于attribute.getNamedItem.value=newvalue;removeAttribute--等于attribute.removeNamedItemgetElementsByTagName DOM定义了getElementsByTagName()方法,用来返回一个包含所有的tagName特性等于某个指定值的元素的NodeList。在Element对象中,tagName特性总是等于小于号之后紧跟随的名称--例如,的tagName是"img"。下一行代码返回文档中所有元素的列表:var oImgs = document.getElementsByTagName;把所有图形都存于oImgs后,只需使用方括号或者Item()方法(getElementsByTagName()返回一个和childNodes一样的NodeList),就可以像访问子节点那样逐个访问这些节点了:alert;//outputs "IMG"假如只想获取在某个页面第一个段落的所有图像,可以通过对第一个段落元素调用getElementsByTagName()来完成,像这样:var oPs = document.getElementByTagName;var oImgsInp = oPs[0].getElementByTagName;可以使用一个星号的方法来获取document中的所有元素:var oAllElements = document.getElementsByTagName;当参数是一个星号的时候,IE6.0并不返回所有的元素。必须使用document.all来替代它。getElementsByName()HTML DOM 定义了getElementsByName(),这用来获取所有name特性等于指定值的元素的。getElementById()这是HTML DOM定义的第二种方法,它将返回id特性等于指定值的元素。在HTML中,id特性是唯一的--这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。注:如果给定的ID匹配某个元素的name特性,IE6.0还会返回这个元素。这是一个bug,也是必须非常小心的一个问题。12下一页阅读全文

insertBefore() Example

Isn'tthisexciting?

You're learning to use the DOM!

一、DOM基础1.节点层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document一样来保存其他节点。Element--表示起始标签和结束标签之间的内容,例如或者。这是唯一可以同时包含特性和子节点的节点类型。Attr--代表一对特性名和特性值。这个节点类型不能包含子节点。Text--代表XML文档中的在起始标签和结束标签之间,或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。CDataSection--的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。Entity--表示在DTD中的一个实体定义,例如。这个节点类型不能包含子节点。EntityReference--代表一个实体引用,例如"。这个节点类型不能包含子节点。ProcessingInstruction--代表一个PI。这个节点类型不能包含子节点。Comment--代表XML注释。这个节点不能包含子节点。Notation--代表在DTD中定义的记号。这个很少用到。Node接口定义了所有节点类型都包含的特性和方法。特性/方法类型/返回类型说明nodeNameString节点的名字;根据节点的类型而定义nodeValueString节点的值;根据节点的类型而定义nodeTypeNumber节点的类型常量值之一ownerDocumentDocument指向这个节点所属的文档firstChildNode指向在childNodes列表中的第一个节点lastChildNode指向在childNodes列表中的最后一个节点childNodesNodeList所有子节点的列表previousSiblingNode指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为nullnextSiblingNode指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为nullhasChildNodes()Boolean当childNodes包含一个或多个节点时,返回真attributesNamedNodeMap包含了代表一个元素的特性的Attr对象;仅用于Element节点appendChildNode将node添加到childNodes的末尾removeChildNode从childNodes中删除nodereplaceChildNode将childNodes中的oldnode替换成newnodeinsertBeforeNode在childNodes中的refnode之前插入newnodd除节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分。NodeList--节点数组,按照数值进行索引;用来表示和一个元素的子节点。NamedNodeMap--同时使用数值和名字进行索引的节点表;用于表示元素特性。2.访问相关的节点下面的几节中考虑下面的HTML页面

替换

HelloWorld!

元素deleteRow删除指定位置上的行insertRow在rows集合中的指定位置上插入一个新行

元素,下面的可以实现:var oHead = oHtml.firstChild;var oBody = oHtml.lastChild;也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array,使用方括号标记:var oHead = oHtml.childNodes[0];var oBody = oHtml.childNodes[1];注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法:var oHead = oHtml.childNodes.item;var oBody = oHtml.childNodes.item;HTML DOM页定义了document.body作为指向

元素的指针。var oBody = ducument.body;有了oHtml,oHead和oBody这三个变量,就可以尝试确定它们之间的关系:alert(oHead.parentNode==oHtml);alert(oBody.parentNode==oHtml);alert(oBody.previousSibling==oHead);alert(bHead.nextSibling==oBody);alert(oHead.ownerDocument==document);以上均outputs "true"。3.处理特性正如前面所提到的,即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法:getNamedItem--返回nodename属性值等于name的节点;removeNamedItem--删除nodename属性值等于name的节点;setNamedItem--将node添加到列表中,按其nodeName属性进行索引;item--像NodeList一样,返回在位置pos的节点;注:请记住这些方法都是返回一个Attr节点,而非特性值。NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,这的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。例如,假设有这样一个元素:

的HTMLElement对象。如果你想取得

You'relearningtousetheDOM!

createElement() Example

要访问

要访问元素(你应该明白这是该文件的document元素),你可以使用document的documentElement特性:var oHtml = document.documentElement;现在变量oHtml包含一个表示

DOM添加元素,使用节点属性

元素的集合tFoot指向

中所有行的集合deleteRow删除指定位置上的行insertRow在rows集合中的指定位置上插入一个新行

元素添加了以下内容:特性/方法说明caption指向

元素的指针。var oBody = ducument.body;有了oHtml,oHead和oBody这三个变量,就可以尝试确定它们之间的关系:alert(oHead.parentNode==oHtml);alert(oBody.parentNode==oHtml);alert(oBody.previousSibling==oHead);alert(bHead.nextSibling==oBody);alert(oHead.ownerDocument==document);以上均outputs "true"。3.处理特性正如前面所提到的,即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法:getNamedItem--返回nodename属性值等于name的节点;removeNamedItem--删除nodename属性值等于name的节点;setNamedItem--将node添加到列表中,按其nodeName属性进行索引;item--像NodeList一样,返回在位置pos的节点;注:请记住这些方法都是返回一个Attr节点,而非特性值。NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,这的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。例如,假设有这样一个元素:

DOM Example

Hello world!

6.让特性像属性一样大部分情况下,HTML DOM元素中包含的所有特性都是可作为属性。假设有如下图像元素:图片 1如果要使用核心的DOM来获取和设置src和border特性,那么要用getAttribute方法:alert(oImg.getAttribute;alert(oImg.getAttribute;oImg.setAttribute("src","mypicture2.jpg");oImg.setAttribute;然而,使用HTML DOM,可以使用同样名称的属性来获取和设置这些值:alert;alert;oImg.src="mypicture2.jpg";oImg.border ="1";唯一的特性名和属性名不一样的特例是class属性,它是用来指定应用于某个元素的一个CSS类,因为class在ECMAScript中是一个保留字,在javascript中,它不能被作为变量名、属性名或都函数名。于是,相应的属性名就变成了className;注:IE在setAttribute()上有很大的问题,最好尽可能使用属性。7.table方法为了协助建立表格,HTML DOM给

元素添加了以下内容特性/方法说明rows

Hello World!

元素添加了以下内容特性/方法说明cells

元素,下面的可以实现:var oHead = oHtml.firstChild;var oBody = oHtml.lastChild;也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array,使用方括号标记:var oHead = oHtml.childNodes[0];var oBody = oHtml.childNodes[1];注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法:var oHead = oHtml.childNodes.item;var oBody = oHtml.childNodes.item;HTML DOM页定义了document.body作为指向

insertBefore() Example

Hello World!

元素并将其放入表格tBodies

removeChild、insertBefore()删除节点复制代码 代码如下:

Hello World!

元素deleteTFood()删除

元素并将其放入表格deleteTHead()删除

等元素添加了一些特性和方法。给

,

同时,假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:var sId = oP.attributes.getNamedItem.nodeValue;当然,还可以用数值方式访问id特性,但这样稍微有些不直观:var sId = oP.attributes.item.nodeValue;还可以通过给nodeValue属性赋新值来改变id特性:oP.attributes.getNamedItem.nodeValue="newId";Attr节点也有一个完全等同于nodeValue属性的value属性,并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。因为这个方法有些累赘,DOM又定义了三个元素方法来帮助访问特性:getAttribute--等于attributes.getNamedItem.value;setAttribute--等于attribute.getNamedItem.value=newvalue;removeAttribute--等于attribute.removeNamedItemgetElementsByTagName DOM定义了getElementsByTagName()方法,用来返回一个包含所有的tagName特性等于某个指定值的元素的 NodeList。在Element对象中,tagName特性总是等于小于号之后紧跟随的名称--例如,的tagName是"img"。下一行代码返回文档中所有元素的列表:var oImgs = document.getElementsByTagName;把所有图形都存于oImgs后,只需使用方括号或者Item()方法(getElementsByTagName()返回一个和childNodes一样的NodeList),就可以像访问子节点那样逐个访问这些节点了:alert;//outputs "IMG"假如只想获取在某个页面第一个段落的所有图像,可以通过对第一个段落元素调用getElementsByTagName()来完成,像这样:var oPs = document.getElementByTagName;var oImgsInp = oPs[0].getElementByTagName;可以使用一个星号的方法来获取document中的所有元素:var oAllElements = document.getElementsByTagName;当参数是一个星号的时候,IE6.0并不返回所有的元素。必须使用document.all来替代它。getElementsByName()HTML DOM 定义了getElementsByName(),这用来获取所有name特性等于指定值的元素的。getElementById()这是HTML DOM定义的第二种方法,它将返回id特性等于指定值的元素。在HTML中,id特性是唯一的--这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。注:如果给定的ID匹配某个元素的name特性,IE6.0还会返回这个元素。这是一个bug,也是必须非常小心的一个问题。5.创建新节点最常用到的几个方法是createDocumentFragment()--创建文档碎片节点createElement--创建标签名为tagname的元素createTextNode--创建包含文本text的文本节点createElement、appendChild()复制代码 代码如下:

元素并将其放入表格createTFood()创建

Hello World!

元素中所有的单元格的集合deleteCell删除给定位置上的单元格insertCell在cells集合的给点位置上插入一个新的单元格8.遍历DOMNodeIterator,TreeWalkerDOM Level2的功能,这些功能只有在Mozilla和Konqueror/Safari中才有,这里就不介绍了下面是一些关于DOM操作相关的一些文章javascript DOM操作之动态删除TABLE多行JavaScript DOM 添加事件

元素rows表格中所有行的集合createTHead()创建

Item 1

元素tHead指向

元素并将其放入表格createCpation()创建

Isn't this exciting?

元素deleteCaption()删除

replaceChild() Example

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:比较详细的javascript DOM 学习笔记第1/2页_javascript技巧_脚本之家

关键词:

JS 事件绑定函数代码_javascript技巧_脚本之家威尼斯www.9778.com

主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌IE浏览器里,this指向问题。 直接上代码吧! 复制代码 代码如下...

详细>>

javascript browser浏览器类型以及版本判断代码_javascript技巧_脚本之

return borwser比如当前浏览器类型是ie6.0,那么borwser的值应该是[“ie”,"6","6.0"]数组的第一个值表示浏览器的类型,第二...

详细>>

JavaScript 类的定义和引用 JavaScript高级培训 自定义对象_js面向对

一,概述   在Java语言中,大家得以定义自个儿的类,并依赖这几个类创制对象来行使,在Javascript中,我们也足以定...

详细>>

编纂高品质的JavaScript 脚本的加载与奉行_javascript技术_脚本之家

本子能够放在html页面包车型大巴head里面,也得以投身body里面。把脚本放在body中,当浏览器遇见 1.今日写js境遇一个...

详细>>