首页 > 代码库 > DOM

DOM

2024-11-03 02:56:39   207人阅读

Node类型

所有节点类型由在Node类型中定义的12个数值常量来表示，任何节点类型必居其一：

Node.ELEMENT_NODE   -->1
Node.ATTRIBUTE_NODE   -->2
Node.TEXT_NODE   -->3
Node.CDATA_SECTION_NODE   -->4
Node.ENTITY_REFERENCE_NODE   -->5
Node.ENTITY_NODE   -->6
Node.PROCESSING_INSTRUCTION_NODE   -->7
Node.COMMENT_NODE   -->8
Node.DOCUMENT_NODE   -->9
Node.DOCUMENT_TYPE_NODE   -->10
Node.DOCUMENT_FRAGMENT_NODE   -->11
Node.NOTATION_NODE   -->12

节点最常用的属性便是nodeName和nodeType了，所在确定节点类型可以使用下列代码

        if (someNode.nodeType==Node.ELEMENT_NODE) {//这个在IE下无效            alert(‘Node is an element‘);        }        //为了兼容所有的浏览器        if (someNode.nodeType==1) {            alert(‘Node is an element‘);        }

值得一讲的是节点的childNodes属性，它保存的是一个NodeList对象，每个NodeList对象都有一个length属性，我们可以通过[]的方式或者是item方法来获得其中某一项的值，代码如下：

        var firstNode = someNode.childNodes[0];        var secondNode = someNode.childNodes.item(1);        var length = someNode.childNodes.length;

大家都知道childNodes属性虽然有length属性，但它毕竟是NodeList对象，那如何把它转换为数组对象以方便后续操作呢？看代码：

        function convertToArray(nodes) {            var array = null;            try {                array = Array.prototype.slice.call(nodes, 0);//针对非IE浏览器            } catch (ex) {                array = [];                for (var i = 0,len=nodes.length; i < len; i++) {                    array.push(nodes[i]);                }            }            return array;        }

下面说说之间的关系吧！

技术分享

上述介绍了那么多节点的属性，比如说childNodes,parentNode,firstChild,lastChild,nextSibling,previousSibling等

事实上所有的结点还有一个大家可能不常听到的属性，那就是ownerDocument，该属性指向表示整个文档的文档节点

说说节点的方法吧

hasChildNodes判断是否有子节点，如果有则返回true

appendChild用于向childNodes列表的末尾添加一个节点

insertBefore 这个方法接受两个参数：要插入的节点和作为参照的节点，插入节点后，被插入的节点会变成参照节点的previousSibling，同时返回插入的节点

replaceChild这个方法接受两个参数：要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中被移除（被replaceChild替换的节点仍然为文档所有，只不过在文档中已经没有位置了）。

removeChild接受一个参数，即为要移除的节点。方法调用后被移除的节点将作为返回值（通过removeChild移除的节点仍然为文档所有，只不过在文档中已经没有位置了）

cloneNode用于创建节点的副本，如果传入的参数为true，则执行深复制（复制节点及整个子节点树），如果传入的参数为false，则执行浅复制（仅仅复制节点本身）

normalize处理文档树中的节点（当在某个节点上调用该方法时，就会在该节点的后代节点中查找是否有空文本节点，如果有则删除，是否有相邻的文本节点，如果有则合并）

Document类型

JavaScript通过Document类型表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面，而且因为document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

看看它有哪些属性吧

        var body = document.body;//取得对<body>的引用        var doctype = document.doctype;//取得对<!DOCTYPE html>的引用        var originTitle = document.title;//取得文档标题        document.title = ‘Hello World!‘;//设置文档标题        var url = document.URL;//取得完整的URL 只读属性        var domain = document.domain;//取得域名  可以设置        var ref = document.referrer;//取得来源页面的URL  只读属性

document.implementation属性上规定了一个方法hasFeature，这个方法接受两个参数：要检测的DOM功能的名称及版本号

技术分享

        //检测浏览器是否支持DOM2级XML        var hasXmlDom = document.implementation.hasFeature(‘XML‘, ‘2.0‘);        //检测浏览器是否支持DOM3级XPath        var supportsXPath = document.implementation.hasFeature(‘XPath‘, ‘3.0‘);

document对象还有一些特殊集合，这些集合都是HTMLCollection对象

技术分享

在这里特别说一下HTMLCollection对象有一个namedItem方法（就好像NodeList的item方法一样）

看看它有哪些方法吧

  • getElementById
  • getElementsByName
  • getElementsByTagName
  • write
  • writeln

Element类型

    <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr">Some text</div>    <input type="button" value="Get Values" onclick="getValues()">    <input type="button" value="Set Values" onclick="setValues()"> 
 var div = null;        function getValues(){            if (div == null) {                div = document.getElementById("myDiv");            }            alert(div.id);         //"myDiv"            alert(div.className);  //"bd"            alert(div.title);      //"Body text"            alert(div.lang);       //"en"            alert(div.dir);        //"ltr"        }                    function setValues(){            if (div == null) {                div = document.getElementById("myDiv");            }                    div.id = "someOtherId";            div.className = "ft";            div.title = "Some other text";            div.lang = "fr";            div.dir ="rtl";                }

上面是说的id,title,lang,dir,className等属性。再看一下下面的demo，看如何获得节点属性

        var div = null;        function getValues(){            if (div == null) {                div = document.getElementById("myDiv");            }            alert(div.getAttribute("id"));         //"myDiv"            alert(div.getAttribute("class"));      //"bd"            alert(div.getAttribute("title"));      //"Body text"            alert(div.getAttribute("lang"));       //"en"            alert(div.getAttribute("dir"));        //"ltr"            alert(div.getAttribute("my_special_attribute"));   //"hello!"        }                    function setValues(){            if (div == null) {                div = document.getElementById("myDiv");            }                    div.setAttribute("id", "someOtherId");            div.setAttribute("class", "ft");            div.setAttribute("title", "Some other text");            div.setAttribute("lang","fr");            div.setAttribute("dir", "rtl");                    div.setAttribute("class", "change");        }        function getValues2(){            if (div == null) {                div = document.getElementById("myDiv");            }            alert(div.id);                     //"myDiv"            alert(div.my_special_attribute);   //"hello!" (IE only)            alert(div.align);                  //"left"        }            function outputAttributes(element){            var pairs = new Array(),                attrName,                attrValue,                i,                len;            for (i=0, len=element.attributes.length; i < len; i++){                attrName = element.attributes[i].nodeName;                attrValue = element.attributes[i].nodeValue;                if (element.attributes[i].specified){//如果specified属性返回true 则表示在HTML中指定了特性                    pairs.push(attrName + "=\"" + attrValue + "\"");                }            }            return pairs.join(" ");        }

Text类型

Text类型估计大家都知道有createTextNode方法，下面我来介绍两个大家可能没听过的方法

normalize：规范化文本节点

splitText：分割文本节点

看demo例子吧：

            var element = document.createElement("div");            element.className = "message";                        var textNode = document.createTextNode("Hello world!");            element.appendChild(textNode);                        var anotherTextNode = document.createTextNode("Yippee!");            element.appendChild(anotherTextNode);                        document.body.appendChild(element);                        alert(element.childNodes.length);  //2                        element.normalize();            alert(element.childNodes.length);  //1            alert(element.firstChild.nodeValue);  //"Hello World!Yippee!"
            var element = document.createElement("div");            element.className = "message";                        var textNode = document.createTextNode("Hello world!");            element.appendChild(textNode);                        document.body.appendChild(element);                        var newNode = element.firstChild.splitText(5);            alert(element.firstChild.nodeValue);  //"Hello"            alert(newNode.nodeValue);             //" world!"            alert(element.childNodes.length);     //2

Comment类型

    <div id="myDiv"><!-- A comment --></div>    <input type="button" value="Get Comment" onclick="getComment()">
        function getComment(){                    var div = document.getElementById("myDiv");            var comment = div.firstChild;            alert(comment.data);//A comment            var comment = document.createComment(‘看一下我写的注释‘);//添加注释节点            div.appendChild(comment);        }

执行js后的HTML结构如下图所示：

技术分享

DocumentFragment类型

            var fragment = document.createDocumentFragment();            var ul = document.getElementById("myList");            var li = null;                        for (var i=0; i < 3; i++){                li = document.createElement("li");                li.appendChild(document.createTextNode("Item " + (i+1)));                fragment.appendChild(li);            }                        ul.appendChild(fragment);

CDATASection类型

<div id="myDiv"><![CDATA[This is some content.]]></div>
            var div = document.getElementById("myDiv");            var cdata =http://www.mamicode.com/ div.firstChild;            alert(cdata.nodeType);//8            alert(cdata.nodeValue);//[CDATA[This is some content.]]            //document.createCDATASection

Attr类型

            var element = document.getElementById("myDiv");            var attr = document.createAttribute("align");            attr.value = "left";            element.setAttributeNode(attr);                        alert(element.attributes["align"].value);       //"left"            alert(element.getAttributeNode("align").value); //"left"            alert(element.getAttribute("align"));           //"left"

Attr对象有3个属性

name:特性名称

value：特性的值

specified:如果特性是在HTML默认设置的，则返回true，否则如果是在代码中指定的，则返回false

动态脚本

        function loadScriptString(code){            var script = document.createElement("script");            script.type = "text/javascript";            try {                script.appendChild(document.createTextNode(code));            } catch (ex){                script.text = code;            }            document.body.appendChild(script);        }            function addScript(){            loadScriptString("function sayHi(){alert(‘hi‘);}");            sayHi();        }

动态样式

        function loadStyleString(css){            var style = document.createElement("style");            style.type = "text/css";            try{                style.appendChild(document.createTextNode(css));            } catch (ex){                style.styleSheet.cssText = css;            }            var head = document.getElementsByTagName("head")[0];            head.appendChild(style);        }            function addStyle(){            loadStyleString("body{background-color:red}");         }

操作表格

table元素的方法和属性如下图所示：

技术分享

tbody元素的方法和属性如下图所示：

技术分享

tr元素的方法和属性如下图所示：

技术分享

DOM


联系
我们