zoukankan      html  css  js  c++  java
  • Dom-Element对象

    常用的节点类型有

    节点类型

    数值常量

    字符常量

    Element(元素节点)

    1

    ELEMENT_NODE

    Attr(属性节点)

    2

    ATTRIBUTE_NODE

    Text(文本节点)

    3

    TEXT_NODE

    Comment(注释节点)

    8

    COMMENT_NODE

    Document(文档节点)

    9

    DOCUMENT_NODE

    DocumentType(文档类型节点)

    10

    DOCUMENT_TYPE_NODE

    DocumentFragment(文档片段节点)

    11

    DOCUMENT_FRAGMENT_NODE

    element.tagName 对象的标签名称
    
    var element = document.getElementById("div1");
    
    alert(element.tagName); //输出对象的标签名称。
    
    if (element.tagName.toLowerCase() == "div") { //判断是否为某一标签时,需要小写转换。
    
        alert(1);
    
    }
    
    element.id;
    
    element.className;
    
    element.title;
    
    element.lang;
    
    element.dir;//对齐方式,

    getAttribute() setAttribute() removeAttribute()方法:

    alert(div.getAttribute("id"));
    div.setAttribute(
    "data-value", "2"); alert(div.getAttribute("data-value")); div.removeAttribute("data-value");

     

     

    createElement方法

    var div = document.createElement("div");
    
    div.id = "div2";
    
    div.className = "box1";
    
    var divString = document.createElement("<div>adsf</div>");  //只在IE中可以使用
    
    document.body.appendChild(divString);

    splitText()方法

    方法传入一个参数,参数代表截取的长度,从0开始。

           var div = document.createElement("div");
    
                div.id = "div2";
    
                div.className = "box1";
    
                var textNode = document.createTextNode("Hello world");
    
                div.appendChild(textNode);
    
                div.firstChild.splitText(5);

    Comment类型

    dom中注释是通过comment类型表示的。他的noteType值是8

    CDATASection类型

    CDATASection类型只针对于xml的文档,表示的是CDATA区域。noteType的值是4

    DocumentFragment类型

    在文档中没有与之对应的标记,他是一种轻量级的文档。可以最为一个仓库来使用。

     var frag = document.createDocumentFragment();
                for (var x = 0; x < 10; x++) {
                    var li = document.createElement("li");
                    li.innerHTML = "List Item " + x;
                    frag.appendChild(li);
                }
                document.getElementById("list").appendChild(frag);

    动态添加脚本

    对于某个外部的js文件可以动态的进行加载,也就是说当满足某个条件才开始加载js文件,不满足不是不被加载的。

           var script = document.createElement("script");
    
                script.type = "text/javascript";
    
                script.src = "client.js";
    
                document.body.appendChild(script);

    先创建一个script对象,然后指定好属性之后再添加到页面中,在未执行appendChild前,是不会进行加载的。

    动态样式

           var link = document.createElement("link");
    
                link.rel = "stylesheet";
    
                link.type = "text/css";
    
                link.href = "style.css";
    
                var head = document.getElementsByTagName("head")[0];
    
                head.appendChild(head);

    nodeList

    理解nodeListNamedNodeMapHTMLCollection三个对象可以从整体上更透彻的理解dom的关键,这三个对象都是动态的更新的。nodeList是实时进行更新的,也就是说如果遍历这个对象,并在循环内对这个对象进行元素的添加,是会导致死循环的,如:

    var divs = document.getElementsByTagName("div");
    
                var i;
    
                var div;
    
     
    
                for ( i = 0; i < divs.length; i++);
    
                {
    
                    div = document.createElement("div");
    
                    document.body.appendChild(div);
    
                }

    上面的方法在谷歌中,并没有出现死循环,下面的方法可以避免导致死循环

     

    var divs = document.getElementsByTagName("div");
    
                var i;
    
                var div;
    
                var len;
    
     
    
                for (i = 0, len = divs.length; i < len; i++);
    
                {
    
                    div = document.createElement("div");
    
                    document.body.appendChild(div);
    
                }

     

     

    节点类型

    数值常量

    字符常量

    Element(元素节点)

    1

    ELEMENT_NODE

    Attr(属性节点)

    2

    ATTRIBUTE_NODE

    Text(文本节点)

    3

    TEXT_NODE

    Comment(注释节点)

    8

    COMMENT_NODE

    Document(文档节点)

    9

    DOCUMENT_NODE

    DocumentType(文档类型节点)

    10

    DOCUMENT_TYPE_NODE

    DocumentFragment(文档片段节点)

    11

    DOCUMENT_FRAGMENT_NODE

  • 相关阅读:
    TSP-UK49687
    维度建模的基本原则
    差分约束系统
    随机过程初步
    随机过程——维纳过程
    Xilinx FPGA复位信号设计
    10 Row Abacus
    Python
    FX2LP与FPGA的简单批量回环
    DFT公式的一个简单示例
  • 原文地址:https://www.cnblogs.com/y8932809/p/5395781.html
Copyright © 2011-2022 走看看