站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
JavaScript DOM
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="border:1px solid #000; text-align:center; float:right; padding:6px; margin-bottom:15px;"><strong>导航:</strong> [[JavaScript|上一页]] | {{Template:JavaScript导航}}</span> <div style="clear:both;"></div> ==DOM基础== *节点层次 Document--最顶层的节点,所有的其他节点都是附属于它的。 DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。 DocumentFragment--可以像Document一样来保存其他节点。 Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。 Attr--代表一对特性名和特性值。这个节点类型不能包含子节点。 Text--代表XML文档中的在起始标签和结束标签之间,或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。 CDataSection--<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。 Entity--表示在DTD中的一个实体定义,例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。 EntityReference--代表一个实体引用,例如"。这个节点类型不能包含子节点。 ProcessingInstruction--代表一个PI。这个节点类型不能包含子节点。 Comment--代表XML注释。这个节点不能包含子节点。 Notation--代表在DTD中定义的记号。这个很少用到。 Node接口定义了所有节点类型都包含的特性和方法。 <pre> 特性/方法 类型/返回类型 说明 nodeName String 节点的名字;根据节点的类型而定义 nodeValue String 节点的值;根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 指向这个节点所属的文档 firstChild Node 指向在childNodes列表中的第一个节点 lastChild Node 指向在childNodes列表中的最后一个节点 childNodes NodeList 所有子节点的列表 previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真 attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点 appendChild(node) Node 将node添加到childNodes的末尾 removeChild(node) Node 从childNodes中删除node replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd </pre> 除节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分。 NodeList--节点数组,按照数值进行索引;用来表示和一个元素的子节点。 NamedNodeMap--同时使用数值和名字进行索引的节点表;用于表示元素特性。 *访问相关的节点 <pre> <html> <head> <title>DOM Example</title> </head> <body> <p>Hello World!</p> <p>Isn't this exciting?</p> <p>You're learning to use the DOM!</p> </body> </html> </pre> 要访问<html/>元素(你应该明白这是该文件的document元素),你可以使用document的documentElement特性:var oHtml = document.documentElement;现在变量oHtml包 含一个表示<html/>的HTMLElement对象。如果你想取得<head/>和<body/>元素,下面的可以实现: 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(0); var oBody = oHtml.childNodes.item(1); HTML DOM页定义了document.body作为指向<body/>元素的指针。 var oBody = ducument.body; 有了oHtml,oHead和oBody这三个变量,就可以尝试确定它们之间的关系: <pre> alert(oHead.parentNode==oHtml); alert(oBody.parentNode==oHtml); alert(oBody.previousSibling==oHead); alert(bHead.nextSibling==oBody); alert(oHead.ownerDocument==document); </pre> 以上均outputs "true"。 *处理特性 正如前面所提到的,即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有Element节点才能有特性。Element节点的attributes属性其实NameNodeMap, 它提供一些用于访问和处理其内容的方法: getNamedItem(name)--返回nodename属性值等于name的节点; removeNamedItem(name)--删除nodename属性值等于name的节点; setNamedItem(node)--将node添加到列表中,按其nodeName属性进行索引; item(pos)--像NodeList一样,返回在位置pos的节点; '''注:'''请记住这些方法都是返回一个Attr节点,而非特性值。 NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。 当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,这的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。例如,假设有这样一个元素: <pre> <p style="color:red" id="p1">Hello world!</p> </pre> 同时,假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值: var sId = oP.attributes.getNamedItem("id").nodeValue; 当然,还可以用数值方式访问id特性,但这样稍微有些不直观: var sId = oP.attributes.item(1).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)--等于attribute.removeNamedItem(name)。 [[category:JavaScript]] [[category:脚本语言|J]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:JavaScript导航
(
编辑
)