JavaScript之DOM

来源：互联网发布：java简历包装项目经验编辑：程序博客网时间：2024/05/16 09:34

DOM是针对HTML和XML文档的一个API。

集合类型：
NodeList：类数组对象，用于保存一组有序的节点，通过位置来访问这些节点；NodeList是有生命、有呼吸的对象（通过方括号或item()方法访问某一节点）；

//将NodeList转换为数组function convertToArray(nodes){    var array = null;    try{        //针对非IE浏览器        array = Array.prototype.slice.call(nodes, 0);    }catch(ex){        array = new Array();        for (var i = 0; i < nodes.length; i++){            array.push(node[i]);        }    }    return array;}

HTMLCollection：与NodeList对象相似，还包含namedItem()方法-通过元素的name特性取得集合中的项，同时支持按名称访问；
NamedNodeMap：
DOMTokenList：

节点层次：
文档节点是每个文档的根节点；
文档节点只有一个子节点，html元素（文档元素）；
Node类型：JavaScript所有节点类型都继承自Node类型
·nodeType属性：表明节点类型，最好与数字值进行比较
·nodeName属性：
·nodeValue属性：
节点关系：
·childNodes属性：保存着NodeList对象；
·parentNode属性：指向文档树中的父节点；
·previousSibling属性：访问同一列表中的前一个兄弟节点，第一个节点的previousSibling值为null；
·nextSibling属性：访问同一个列表中的后一个兄弟节点，最后一个节点的nextSibling值为null；
·firstChild属性和lastChild属性：
·ownerDocument属性：指向表示整个文档的文档节点。
节点操作：
·appendChild()方法：向childNodes列表的末尾添加一个节点；
·insertBefore(要插入的节点，作为参照的节点)方法：在参照节点之前插入节点；
·replaceChild(要插入的节点，要替换的节点)方法：用要插入的节点替换被替换的节点；
·removeChild(要移除的节点)方法：被移除的节点将会成为方法的返回值。
其他方法：
·cloneNode(布尔值)方法：创建调用这个方法的节点的一个完全相同的副本；
布尔值=true：深复制，复制节点和整个子节点树；
布尔值=false：浅复制，复制节点本身。
·normalize()方法：处理文档树中的文本节点。
Document类型：
Document节点特征
·nodeType = 9；
·nodeName = #document；
·nodeValue = null；
·parentNode = null；
·ownerDocument = null；
重要属性
·documentElement：指向html元素；
·childNodes：访问文档元素，和documentElement差不多，不过前者更好；
·body：直接取得对body元素的引用；
·doctype：直接取得对DOCTYPE的引用；
·title：包含着title元素中的文本；
·url：包含页面完整的URL；
·domain：包含页面的域名；
·referrer：保存着链接到当前页面的那个页面的URL，可能为null；
重要方法
·getElementById(要取得元素的id)：
·getElementsByTagName(要取得元素的标签名)：返回HTMLCollection对象；
·getElementsByName()：返回带有给定name特性的所有元素，常用在单选按钮；
特殊集合（都是HTMLCollection对象）
·document.ancors:返回带有name特性的a元素；
·document.applets:返回所有applet元素，不推荐使用；
·document.forms:返回所有form元素；
·document.images:返回所有img元素；
·document.links:返回所有带href特性的a元素；
其他方法
·通过implementation属性和hasFeature()方法检测DOM的版本；
·write()、writeln()、open()、close()：将输出流写入到网页中，打开和关闭网页的输出流；

<!DOCTYPE html><html><head>    <title>document.write() Example 4</title></head><body>    <p>This is some content that you won't get to see because it will be overwritten.</p>    <script type="text/javascript">        window.onload = function(){            document.write("Hello world!");        };    </script></body></html>

Element类型：
Element节点特征
·nodeType = 1；
·nodeName = 元素的标签名；
·nodeValue = null；
·parentNode = Document或者Element；
HTML元素
取得和设置特性
attributes属性
创建元素
Text类型：
·nodeType = 3；
·nodeName = #text；
·nodeValue = 节点所包含的文本；
·parentNode = Element；
·不支持子节点；

DOM操作技术：
动态脚本
动态样式
操作表格

Selector API：

HTML5（DOM相关）

DOM专有扩展（存在兼容性问题）

0 0