本文共 3900 字,大约阅读时间需要 13 分钟。
DOM
- D:文档 - html 文档或 xml 文档
- O:对象 - document 对象的属性和方法
- M:模型
- DOM 是针对 xml 的基于树的API
- DOM 树:节点的层次
- DOM 把一个文档表示为一颗家谱树(父,子,兄弟)
- DOM 定义了 Node 接口以及许多种节点类型来表示 XML 节点的多个方面
节点:来源于网络理论,代表网络中一个连接点,网络是由节点构成的集合
①,元素节点②,属性节点:元素的属性,可以直接通过属性的方式来操作③,文本节点:是元素节点的子节点,其内容为文本① 直接在 HTML 页面中书写 js代码
缺点:
a,js 和 HTML 强耦合,不利于代码的维护 b,若 click 相应函数是比较复杂的,则需先定义一个函数,然后在 onclick 属性中完成对函数的引用,比较麻烦② 一般的,不能在 body 节点之前来直接获取 body 内的节点,因为此时 html 文档树还没有加载完成,获取不到指定的节点Untitled Document
③ 可以在整个 HTML 文档的最后编写类似代码,但这不符合习惯
④ 一般的,在 body 节点之前编写 js代码,但需要利用 windom.onload 事件,该事件在当前文档完全加载之后被触发,如:Untitled Document
Node接口的特性和方法
nodeName:String,说明:nodeVale:StringnodeType:NumberownerDocument:DocumentfirstChild:NodelastChild:NodechildNodes:NodeListpreviousSibling:NodenextSibling:NodehasChildNodes():Booleanattributes:NameNodeMapappendChild(node):NoderemoveChild(node):NodereplaceChild(newnode,oldnode):NodeinsertBefore(newnode,refnode):Node
以下实例中使用到的 HTML
你喜欢那个城市?
你喜欢哪款单机游戏?
① **document.getElementById:
根据 id 属性获取对应的单个节点,该方法为 document对象的方法② **document.getElementsByTagName: 根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度, 该方法为 Node接口的方法,即任何一个节点都有这个方法③ document.getElementsByName: 根据节点的 name属性获取符合条件的节点数组,但IE的实现方式和 w3c标准有差别: 在html 文档中若某节点(li) 没有 name 属性, 则 IE 使用 document.getElementsByName 不能获取到节点数组,在火狐可以④ 其它的两个方法 ,IE根本不支持,所以不建议使用。① **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点(某一指定的元素节点的属性)的值,如:
var nameNode = documentElementById("name"); // 获取元素 alert(nameNode.value); // 获取元素的值 nameNode.value = "chuxiaojiang"; // 设置元素的值② 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值。使用下面的属性时都需要先获取相应的元素节点,
① childNodes属性获取全部的子节点:火狐和IE的实现方式有区别② firstChild属性获取第一个节点③ lastChild属性获取最后一个子节点① 步骤:元素节点 --> 获取元素节点的子节点
② 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>,可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值① nodeName:代表当前节点的名字,只读属性,
如果给定节点是一个文本节点,nodeName 属性将返回内容为 #text 的字符串② nodeType:返回一个整数,这个数值代表着给定节点的类型,只读属性 1 -- 元素节点,2 -- 属性节点,3 -- 文本节点③ nodeValue:返回给定节点的当前值(字符串),可读写属性 a,元素节点,返回值是 null b,属性节点:返回值是这个属性的值 c,文本节点:返回值是这个文本节点的内容如:① createElement():按照给定的标签名创建一个新的元素节点,该方法只有一个参数:
被创建的元素节点的名字,是一个字符串。 方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的 nodeType 属性等于 1. 新元素节点不会自动添加到文档里,它只是一个存在于 JavaScript 上下文的对象。如:① createTextNode():创建一个包含着给定文本的新文本节点,
这个方法的返回值是一个指向新建文本节点引用指针, 它是一个文本节点,所以它的 nodeType 属性等于 3, 方法只有一个参数:新建文本节点所包含的文本字符串,新元素节点不会自动添加到文档中。① appendChild():var reference = element.appendChild(newChild):
给定子节点 NewChild 将成为给定元素节点 element 的最后一个子节点, 方法的返回值是一个指向新增子节点的引用指针。① replaceChild():把一个给定父元素里的一个子节点替换为另一个子节点,
var reference = element.replaceChild(newChild,oldChild),返回值是一个指向已被替换的哪个子节点(旧节点)的引用指针② 该节点除了替换功能以外还有移动的功能③ 该方法只能完成单向替换,若需要使用双向替换,需要自定义函数:① insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面,
var reference = element.insertBefore(newNode,targetNode);节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面,节点 targetNode 必须是 element 元素的一个子节点。如:window.onload = function(){ var cityNode = document.getElementById("city"); var bjNode = document.getElementById("bj"); var rlNode = docuement.getElementById("rl"); cityNode.insertBefore(rlNode,bjNode);}
② 自定义 insertAfter() 方法
① removeChild():从一个给定元素里删除一个子节点:var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针,某个节点被 removeChild() 方法删除时,这个节点所包含的所有子节点将同时被删除,如果想删除某个节点,但不知道它的的父节点是哪一个,parentNode 属性可以帮忙如:var bjNode = document.getElementById("bj"); // 找到要删除的节点bjNode.parentNode.removeChild(bjNode); // 利用要删除的节点的父节点执行删除操作。① 浏览器几乎都支持该属性,但不是 DOM 标准的组成部分,
innerHTML 属性可以用来读写某个给定元素里的 HTML 内容本文完~
转载地址:http://gcbpi.baihongyu.com/