您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:Element节点类型详解,你所不领会的

新葡亰496net:Element节点类型详解,你所不领会的

发布时间:2019-06-15 20:29编辑:新葡亰官网浏览(143)

    DOM Element节点类型详解

    2015/09/21 · HTML5 · DOM

    本文作者: 伯乐在线 - 韩子迟 。未经笔者许可,禁止转载!
    应接参加伯乐在线 专辑笔者。

    上文中我们上课了 DOM 中最根本的节点类型之一的 Document 节点类型,本文我们继续深远,谈谈另三个根本的节点类型 Element 。

    一:Node类型

    DOM元素的attribute和property很轻巧混倄在协同,分不清楚,两个是差异的事物,可是两岸又联系紧凑。多数菜鸟朋友,也席卷从前的本身,平日会搞不清楚。

    DOM成分的attribute和property很轻便混倄在联合具名,分不清楚,两个是见仁见智的东西,可是两岸又联系紧凑。好多新手朋友,也席卷从前的自个儿,经常会搞不清楚。

    你所不驾驭的javascript操作DOM的内部原因知识点(一),javascriptdom

    一:Node类型

    DOM1级定义了一个Node接口,该接口是由DOM中的全数节点类型达成。每一个节点都有八个nodeType属性,用于注明节点的门类,节点类型在Node类型中有以下两种:

    Node.ELEMENT_NODE(1); 成分节点
    Node.ATTRIBUTE_NODE(2); 属性节点
    Node.TEXT_NODE(3); 文本节点
    Node.DOCUMENT_NODE(9); 文书档案节点

    实质上还也许有众多样,不过那个都不是很常用,所以就来驾驭这里面4种就足以了,我们先来探望节点类型,比方如下代码:

    HTML代码如下:

    <div id="test">
     <p>aaaaaa</p>
     <p>bbbbbb</p>
     <p>cccccc</p>
    </div>
    

    JS如下:

    var test = document.getElementById("test");
    if(test.nodeType === Node.ELEMENT_NODE) {
     alert(1)
    }
    

    如上代码在IE8及以下下是不行的,会报错,如下:

    新葡亰496net 1

    因为IE未有当面Node类型的构造函数,因此在IE8-下会有错误,不过大家得以由此数值来比较,比方上面的要相比元晚秋点的话,大家得以行使1来相比较,同理属性节点是2,文本节点是3;如下代码:

    var test = document.getElementById("test");
    // 下面的所有的浏览器都支持
    if(test.nodeType == 1) { 
      alert(1)
    }
    

    理解nodeName与nodeValue

    nodeName保存的是因素的标签字,而nodeValue一般都以null;大家能够看如下代码,没有特殊的辨证,HTML代码都以地点的,因而那边就不贴代码了;如下JS代码测试:

    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     console.log(test.nodeName); // 打印DIV
     console.log(test.nodeValue); // 打印null
    }
    

    驾驭节点关系

    <!doctype html>
    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>Document</title>
     </head>
     <body>
    </body>
    </html>
    

    如上代码,大家能够把head和body是html的子成分,同理html是他俩的父级成分,那么head和body正是手足成分了,那么head及body里面包车型客车正是子成分了,大家供给明白的是每一个节点都有贰个childNodes属性,其保存的是附近数组的成分,其也会有length属性,然则他不是数组Array的实例,比如大家能够看看如下测试代码就可以:

    <div id="test">
     <p>aaaaaa</p>
     <p>bbbbbb</p>
     <p>cccccc</p>
    </div>
    

    JS代码如下:

    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     console.log(test.childNodes);
     console.log(test.childNodes.length);
    }
    

    如上代码,在职业浏览器下及IE9 下 第一行打字与印刷如下:

    [text, p, text, p, text, p, text, item: function]

    第二行打字与印刷7 长度为7,因为她俩把公文节点这么些空格也包涵进来了,不过在IE8及以下,长度为3,他们不包蕴文件空格的节点,由此想要统一的话,大家得以编写制定HTML代码去掉空格,如下HTML代码就能够;

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

    本条难点稍后在仔细思量,大家今后来探望如何获得子元素,我们得以应用2种办法,第一种是采纳中括号[index]目录,第二种是应用item[index]目录,如下代码:

    console.log(test.childNodes[1]); // <p>bbbbbb</p>
    console.log(test.childNodes.item(1)); // <p>bbbbbb</p>

    唯独她们并不是数组,大家得以测试下代码就可以,如下代码:

    console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]");
    // false不过大家使其改换为数组,如下代码:

    //在IE8 及前边版本中没用
    var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
    console.log(arrayOfNodes instanceof Array);

    // true可是在IE8及前面不奏效;由于IE8及更早版本将NodeList完成为三个COM对象,而小编辈无法像使用JScript对象那样接纳对象,要想在IE低版本中改动为Array的样式,我们得以像上边一样包裹三个格局就可以;

    function convertToArray(nodes){
     var array = null;
     try {
      array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
     } catch (ex) {
      array = new Array();
      for (var i=0, len=nodes.length; i < len; i  ){
       array.push(nodes[i]);
      }
     }
     return array;
    }
    var test = document.getElementById("test");
    var testArray = convertToArray(test.childNodes);
    console.log(testArray instanceof Array); // true
    

    知道parentNode(父节点),previousSibling(上三个兄弟节点),nextSibling(下一个兄弟节点);

    种种节点都有二个parentNode属性,该属性指向文书档案中父节点,previousSibling是指当前节点的上贰个同胞节点,nextSibling是指当前节点的下三个亲生节点,比如如下代码:

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     var secodeChild = test.childNodes[1];
     console.log(secodeChild); // <p>bbbbbb</p>
     console.log(secodeChild.previousSibling); // <p>aaaaaa</p>
     console.log(secodeChild.nextSibling); // <p>cccccc</p>
    }
    

    假如该节点列表中唯有二个节点的话,那么该节点的previousSibling和nextSibling都为null;父节点的firstChild指向了父节点中第二个节点;如下代码:

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    JS如下:

    var test = document.getElementById("test");
    if(test.nodeType == 1) { 
     console.log(test.firstChild); // <p class="a">aaaaaa</p>
     console.log(test.lastChild); // <p class="c">cccccc</p>
    }
    

    父节点的firstChild始终等于父节点的.childNodes[0],父节点的lastChild始终等于父节点的.childNodes[父节点的.childNodes.length

    • 1]; 如下代码:

      console.log(test.firstChild === test.childNodes[0]); // true console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true

    一经未有子节点的话,那么firstChild和lastChild都对准为空null;

    hasChildNodes():假设须求判断该父节点有没有子节点的话,能够应用该办法剖断,重临的是贰个布尔型,有重回true,未有回到false,如下代码:

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    JS代码如下:

    var test = document.getElementById("test");
    console.log(test.hasChildNodes());

    // true即使是之类的 就重回false;如下代码:

    <div id="test"></div>
    var test = document.getElementById("test");
    console.log(test.hasChildNodes()); // false

    ownerDocument: 全数节点都有最后贰个本性是ownerDocument,该属性指向表示全体文书档案的文书档案节点,这种关联表示的任何节点都属于它所在的文档,任何节点都不能够而且存在三个或越来越多文书档案中,通过这几个脾气,大家得以不用在节点档期的顺序中通过层层回溯达到顶部,而是可以一向访问文书档案节点;如下测试代码:

    <div id="test">
     <p class="a">11</p>
    </div>
    var test = document.getElementById("test");
    console.log(test.ownerDocument); // document
    var p = test.ownerDocument.getElementsByTagName("p");
    console.log(p); // <p class="a">11</p>
    

    appendChild(): 用于向childNodes列表的末尾增加一个节点;再次回到的是新增的节点;如下代码:

    <div id="test">
    <p class="a">11</p>
    </div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("p");
    var returnNode = test.appendChild(newNode);
    console.log(returnNode); // <p></p>
    console.log(returnNode === newNode); // true
    console.log(test.lastChild === newNode); // true
    

    insertBefore(): 该格局是将新节点插入到内定的节点的日前去,该方法接收2个参数,要插入的节点和作为参谋的节点;插入节点后,被插入的节点会成为参照节点的前贰个亲生节点,同不经常间被艺术再次来到,如下代码:

    <div id="test">
    <p class="a">11</p>
    </div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,test.childNodes[0]);
    console.log(returnNode); // <div></div>
    console.log(returnNode === newNode); // true
    

    插入节点后,结构产生如下:

    复制代码 代码如下:
    <div id="test">
    <div></div>
    <p class="a">11</p>
    </div>

    不过一旦参照节点为null的话,那么就能够把新节点插入到最后面去了,如下代码:

    复制代码 代码如下:
    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,null);

    插入后HTML结构如下:

    复制代码 代码如下:
    <div id="test">
        <p class="a">11</p>
        <div></div>
    </div>

    小编们还是能够更加尖锐的看下如下测试代码:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 插入后成为最后一个节点
    var returnNode = test.insertBefore(newNode,null);
    console.log(returnNode === test.lastChild); // true 
    // 插入后成为第一个节点
    var returnNode = test.insertBefore(newNode,test.firstChild);
    console.log(returnNode === newNode); // true
    console.log(newNode === test.firstChild); // true
    // 插入到最后一个子节点的前面
    var returnNode = test.insertBefore(newNode,test.lastChild);
    console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true
    

    replaceChild(); 该措施接收2个参数,要插入的节点和要替换的节点,要替换的节点将由那几个主意重临并从文书档案树中被移除,同期由插入的节点攻陷其岗位,如下代码:

    <div id="test"><p class="a">11</p><p class="b">22</p></div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换第一个节点
    var returnNode = test.replaceChild(newNode,test.firstChild);
    console.log(returnNode); // <p class="a">11</p>
    

    轮换后html代码结构产生如下:

    <div id="test"><div></div><p class="b">22</p></div>

    轮换最终三个节点代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换最后一个节点
    var returnNode = test.replaceChild(newNode,test.lastChild);
    console.log(returnNode); // <p class="b">22</p>
    

    轮换后的代码如下:

    <div id="test"><p class="a">11</p><div></div></div>removeChild():移除节点,该方法接收叁个参数,即要移除的节点;

    被移除的节点将改成再次来到值,如下代码:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 移除第一个节点
    var returnNode = test.removeChild(test.firstChild);
    console.log(returnNode); // <p class="a">11</p>
    

    移除后的代码结构变成如下:

    <div id="test"><p class="b">22</p></div>

    移除最终三个节点的代码如下:

    // 移除最终一个节点
    var returnNode = test.removeChild(test.lastChild);
    console.log(returnNode); // <p class="b">22</p>
    移除后的代码结构变为如下:

    <div id="test"><p class="a">11</p></div>cloneNode():

    仿造二个一模二样的副本,该办法接收三个布尔值参数,要是为true的话,表明是深复制,复制该节点及全体子节点书,要是为false的话,只复制该节点本人,比方如下代码:

    var test = document.getElementById("test");
    var deeplist = test.cloneNode(true);
    console.log(deeplist);
    // <div id="test"><p class="a">11</p><p class="b">22</p></div>
    如果是浅复制的如下代码:
    var test = document.getElementById("test");
    var deeplist = test.cloneNode(false);
    console.log(deeplist);// <div id="test"></div>
    

    Document类型

    JS通过Document类型表示文书档案,document承继HTMLDocument(承袭自Document)类型的一个实例,表示全数HTML页面。document对象是window的一个属性,所以能够透过全局对象来拜访,document对象有如下特点:

    nodeType值为9,
    nodeName值为”#document”,
    nodeValue值为null,
    parentNode值为null,
    ownerDocument值为null
    明亮文书档案document的子节点
    documentElement: 该属性始终对准html元素,如下代码:
    console.log(document.documentElement); // 指向html的引用
    比如急需从来访问html成分的引用能够直接使用该因素越来越快,更利于。
    childNodes: 通过childNodes列表访问文书档案成分;如下测试代码:

    console.log(document.documentElement); // 指向html的引用
    console.log(document.childNodes[0]); // <!doctype html>
    console.log(document.firstChild); // <!doctype html>
    console.log(document.firstChild === document.childNodes[0]); // true
    console.log(document.body); // 指向body的引用
    

    有着的浏览器都援助document.documentElement 和 document.body属性;

    title:  通过那个天性可以得到网页的标题,如下测试代码:

    console.log(document.title);

    也能够该方法设置网页的标题;如下代码:

    document.title = “笔者是龙恩”;

    U普拉多L:  获得页面中总体的url,如下代码测试:

    console.log(document.URL); //

    domain: 该属性蕴涵页面包车型客车域名;如下测试代码:

    console.log(document.domain); // 127.0.0.1

    域名也足以设置的,举例大规模的跨子域的景况下,大家须要设置同一的父域就可以成功跨域;

    namedItem(): 该办法能够经过成分的name性子获得集结中的项,举例未来页面上有好些个input的框,小编想经过她们的name属性取得自个儿想要的哪一项,测试代码如下:

    HTML代码如下:

    <input name="aa"/>
    <input name="bb"/>

    JS代码如下:

    var inputs = document.getElementsByTagName("input");
    console.log(inputs.namedItem("aa")); // <input name="aa"/>

    作者们仍可以透过方括号的语法来做客,如下代码:

    console.log(inputs["aa"]); // <input name="aa"/>

    要想获得文档中享有的因素,能够向getElementsByTagName()中传播”*”; 星号表示一切的意趣;

    getElementsByName(); 该方法也是HTMLDocument类型才有的艺术,那个方法会再次来到带有给定name性子的保有因素,如下测试代码:

    <input name="aa" type="radio"/>
    <input name="aa" type="radio"/>
    var aa = document.getElementsByName("aa");
    console.log(aa); // object
    console.log(aa.length); // 2
    

    该方法也会再次回到三个HTMLCollection.

    浏览器匡助程度IE,firefox,chrome都支持;

    Element类型

    Element节点有以下特点:

    nodeType的值为1;

    nodeName的值为成分的竹具名;

    nodeValue的值为null;

    parentNode可能是Document或Element

    要访问成分的标签字,可以选拔nodeName属性,也能够选择tagName属性,那四个属性会重回一样的值,如下代码:

    <div id="test"></div>
    var test = document.getElementById("test");
    console.log(test.tagName); // DIV
    console.log(test.nodeName); // DIV
    console.log(test.nodeValue); // null;
    console.log(test.parentNode); // body
    console.log(test.nodeType); // 1
    

    明亮HTML成分中的获取属性的办法

    持有HTML成分都由HTMLElement类型表示,HTMLElement类型直接传承Element;如若想要取得HTML成分的风味的话,有上边多少个格局:

    getAttribute(); 获取元素的质量的不二等秘书籍;如下测试代码:

    <div id="test" class="testName" title="aa"></div>
    var test = document.getElementById("test");
    console.log(test.getAttribute("id")); // test
    console.log(test.getAttribute("class")); // testName
    console.log(test.getAttribute("title")); // aa
    

    专注:上面的取得类名在IE8 及行业内部浏览器下都以选拔获取属性class来获得类名,上边的假设在IE7下会回来null, 不过在IE7及以下是应用className这么些性情来得到的;如下代码:在IE7下测试:

    console.log(test.getAttribute("className")); // testName

    自然也得以收获自定义的习性;如下代码:

    <div id="test" data-value="test1"></div>

    console.log(test.getAttribute("data-value")); // test1

    setAttribute() 设置成分的习性;该格局接收2个参数,第三个参数是性质名称,第一个参数是相应的值;就算该值存在,则会以现行反革命的值替换此前的值,要是属性名不存在,则会创立该属性,并钦点该属性的值;如下代码:

    <div id="test"></div>
    // JS代码如下:
    var test = document.getElementById("test");
    test.setAttribute("id",'test');
    test.setAttribute("class","testName");
    test.setAttribute("title","aa");
    test.setAttribute("data-value","test1");
    

    生成HTML结构如下:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    removeAttribute(); 删除成分的特征;如下代码:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    JS代码如下:

    var test = document.getElementById("test");
    test.removeAttribute("id");
    test.removeAttribute("class");
    test.removeAttribute("title");
    test.removeAttribute("data-value");
    

    IE7及以下删除类名必要运用className;

    attributes属性

    Element类型是接纳attributes属性的唯一多个dom节点类型,attributes属性包涵一个NamedNodeMap集结;该指标有以下办法:

    getNamedItem(name): 重返nodeName属性等于name的节点;

    attributes属性中蕴藏一多级节点,每一种节点的nodeName就是特色的称号,而节点的nodeValue正是节点值,要得到成分id的特色,如下代码:

    <div id="test" class="testName" title="aa" data-value="test1"></div>JS代码如下:

    复制代码 代码如下:
    var div = document.getElementById("test");
    var id = div.attributes.getNamedItem("id").nodeValue;
    console.log(id);  // test

    咱俩也得以因个中括号的语法来博取的,如下代码:

    复制代码 代码如下:
    var id = div.attributes['id'].nodeValue;
    console.log(id); // test

    同样大家也能够经过地点介绍的getAttribute(“id”)方法来博取元素,如下代码:

    console.log(div.getAttribute("id")); // test

    也得以通过以下办法给成分设置id,如下方法:

    div.attributes["id"].nodeValue = "aa";

    removeNamedItem(name): 从列表中移除nodeName属性等于name的节点;

    调用removeNamedItem()方法与在要素上调用removeAttribute()方法的效果同样,是平素删除全数给定名称的特色。他们中间的界别是:removeNamedItem()方法重临表示被删去本性的节点;

    如下代码:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    JS代码如下:

    复制代码 代码如下:
    var div = document.getElementById("test");
    var oldAttr = div.attributes.removeNamedItem("id");
    console.log(oldAttr); // 重回是被删除的节点  id="test"

    今日的html结构变为如下:

    <div class="testName" title="aa" data-value="test1"></div>

    如上格局:前段时间IE,firefox,chrome浏览器都补助;

    可是上边大家有getAttribute,setAttribute(),removeAttribute()方法,我们得以选拔那些主意足够代替上边介绍的多少个措施,不过只要想遍历一个要素上有多少个属性时,attributes那些就能够派上用上了,如下代码:

    HTML代码如下:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    JS代码如下:

    var div = document.getElementById("test");
    function outputAttributes(element) {
     var arrs = new Array();
     var attrName,
       attrValue,
      i,
      len;
     for(i = 0, len = element.attributes.length; i < len; i  ) {
      attrName = element.attributes[i].nodeName;
      attrValue = element.attributes[i].nodeValue;
      arrs.push(attrName   "='"   attrValue   "'");
     }
     return arrs.join(" ");
    }
    console.log(outputAttributes(div));
    

    结果打字与印刷如下:

    id='test' class='testName' title='aa' data-value='test1'

    地方的函数使用贰个数组来保存名值对,最终再以空格为分隔符将它们拼接起来,但是地方的代码我们供给留意两点:

    1.对准attributes对象中的天性,区别的浏览器重临的次第区别。
    2.IE7及更早的版本会再次回到HTML成分中颇具大概的风味,包涵未有一点点名的表征;
    针对IE7的主题材料我们得以进行改进,我们都清楚,每本性格节点都有二个名称叫specified的特性,这一个属性值假使为true,则代表要么在HTML中内定了对应的特征,要么通过setAttribute方法设置了该特性,在IE中,全数为设置过的性格该属性的之都为false;如下代码:

    var div = document.getElementById("test");
    function outputAttributes(element) {
     var arrs = new Array();
     var 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) {
        arrs.push(attrName   "='"   attrValue   "'");
      }
     }
     return arrs.join(" ");
    }
    console.log(outputAttributes(div));
    

    明白成分的子节点

    要素得以有专断数指标子节点和后人节点,成分的childNodes属性中它包涵了它的所有子节点,这几个子节点只怕是因素,文本节点,注释或拍卖指令;分化的浏览器子节点的个数差别等,下面大家来看望demo如下:

    <ul id="list">
     <li>11</li>
     <li>22</li>
     <li>33</li>
    </ul>
    

    JS代码如下:

    复制代码 代码如下:
    var list = document.getElementById("list");
    console.log(list.childNodes);
    console.log(list.childNodes.length);

    笔者们事先在上边讲过,在标准浏览器下(IE9 ,firefox,chrome)下,打字与印刷的长短是7个,因为他们把空格也包罗上去,在IE8-及以下的浏览器重回的是3个子成分,那是表现的正常化状态下,但是要是笔者前些天把html成分的空格都去掉的话,那么具备的浏览器都会回来3个子成分,如下代码:

    <ul id="list"><li>11</li><li>22</li><li>33</li></ul>

    JS代码如下:

    复制代码 代码如下:
    var list = document.getElementById("list");
    console.log(list.childNodes);
    console.log(list.childNodes.length);

    那就是说日常我们不恐怕都这么小心小意的编写制定html代码的,因为一步小心就有贰个空格发生,因而大家得以如下判定下是否因首秋点;如下代码演示:

    <ul id="list">
     <li>11</li>
     <li>22</li>
     <li>33</li>
    </ul>
    

    JS代码如下:

    var list = document.getElementById("list");
    var arrs = [];
    for(var i = 0, ilen = list.childNodes.length; i < ilen; i  ) {
     var curElement = list.childNodes[i];
     if(curElement.nodeType === 1){
       arrs.push(curElement);
     }
    }
    console.log(arrs); 
    console.log(arrs.length); // 3
    

    如上代码在享有的浏览器都支持,通过决断该因素是否因首秋点,然后在实行后续操作;不是因三秋点都会过滤掉,由此回到的长度都为3;

    理解Text类型

    Text节点具有以下特征:

    nodeType的值为3;
    nodeName的值为”#text”;
    nodeValue的值为节点所涵盖的公文;
    parentNode是一个Element;

    从未子节点;

    1.创造文本节点;
    能够运用document.createTextNode()创造新文本节点,那些措施需求二个参数,即要插入的文本,如下代码:

    var element = document.createElement("div");
    var text = document.createTextNode("aa");
    element.appendChild(text); 
    document.body.appendChild(element); 
    
    1. 分割文本节点splitText(offset); 从offset钦命的职位将方今的文书节点分成2个公文节点;如下代码:

      var element = document.createElement("div"); var text = document.createTextNode("aabbbccc"); element.appendChild(text); document.body.appendChild(element);

      var newNode = element.firstChild.splitText(5); console.log(element.firstChild.nodeValue); // aabbb console.log(newNode.nodeValue); // ccc console.log(element.childNodes.length); // 2

    浏览器帮助的品位有IE,firefox,chrome都支持;

    通晓DOM操作—动态插入脚本

    小编们动态插入JS脚本,常见的写法有如下代码就可以插入:

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

    就可以在body最前边动态插如a.js,此动态插入不会杜绝浏览器加载;我们为了进一步扩充性,大家也得以打包三个函数,如下代码:

    function loadScript(url) {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = url;
     document.body.appendChild(script);
    }
    loadScript("a.js");
    

    当页面有多个js须要动态插入的话,能够依次调用loadScript函数就能够;
    但是假诺大家明天有如此三个急需,动态加载JS完后,作者想在那背后做点事情,大家都知晓,动态加载也得以知晓为异步加载,不会杜绝浏览器,不过大家须求什么驾驭动态JS已经加载完了吗?

    大家事先讲过一篇小说是 “Javascript事件下结论”中有咬定JS动态加载完后选用load事件来监听js是或不是动态加载完,将来我们再来复习下load事件;
    Javascript中最常用的一个事变是load,当页面加载完后(包涵全部的图片,javascript文件,css文件等外部财富)。就能够触发window上边的load事件;近些日子得以有2种触发load事件,一种是直接放在body上边触发;举例如下代码:

    <body onload=”a()”></body>

    第二种是通过JS来触发,如下代码:

    复制代码 代码如下:
    EventUtil.addHandler(window,'load',function(event){
          alert(1);
    });

    地点的伊夫ntUtil.addHandler 是大家事先在javascript事件下结论中封装的JS函数,以往我们一贯拿过来使用,如下代码:

    var EventUtil = {
     addHandler: function(element,type,handler) {
      if(element.addEventListener) {
        element.addEventListener(type,handler,false);
      }else if(element.attachEvent) {
       element.attachEvent("on" type,handler);
      }else {
       element["on"  type] = handler;
      }
     },
     removeHandler: function(element,type,handler){
      if(element.removeEventListener) {
        element.removeEventListener(type,handler,false);
      }else if(element.detachEvent) {
       element.detachEvent("on" type,handler);
      }else {
       element["on"  type] = null;
      }
     },
     getEvent: function(event) {
      return event ? event : window.event;
     },
     getTarget: function(event) {
      return event.target || event.srcElement;
     },
     preventDefault: function(event){
      if(event.preventDefault) {
       event.preventDefault();
      }else {
       event.returnValue = false;
      }
     },
     stopPropagation: function(event) {
      if(event.stopPropagation) {
       event.stopPropagation();
      }else {
       event.cancelBubble = true;
      }
     }
    };
    

    上面我们来看看哪些行使JS事件来判断JS是不是加载成功的代码,大家能够应用load事件来监听,如下代码:

    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     EventUtil.addHandler(script,'load',function(event){
      console.log(script.src);
     });
     script.src = 'a.js';
     document.body.appendChild(script);
    });
    

    如上代码,script元素也会触发load事件,以便能够规定动态加载jS是或不是加载成功,上边的代码内定src属性和钦定的事件管理程序的风云能够轮交换一下地点置,先后顺序不首要,如上代码,我们也足以如此写,如下代码:

    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     script.src = 'a.js';
     document.body.appendChild(script);
     EventUtil.addHandler(script,'load',function(event){
      console.log(script.src);
     });  
    });
    

    时下只有IE9 ,Firefox,opera,chrome和safari3 援助,IE8及以下不帮忙该load事件,因而大家要求针对IE8及以下做拍卖;

    理解readystatechange事件

    IE为DOM文书档案中的某个部分提供了readystatechange事件,这一个事件的指标提供与文书档案或因素的加载的状态有关音讯,此事件提供了上面5个值中的一个;

    uninitialized(未开始化):对象存在但一向不发轫化;
    loading(正在加载):对象正在加载数据;
    loaded(加载完结): 对象加载数据变成;
    interactive(交互): 能够操作对象了,但并未有完全加载;
    complete(达成):对象已经加载成功;

    <script>(在IE和opera)杏月<link>(仅IE中)成分也会触发readystatechange事件,能够用来规定外部的javascript和css文件是还是不是曾经加载成功,基于元素触发的readystatechange事件,即readyState属性无论等于”loaded”照旧”complete”都得以象征能源已经可用;如下针对IE的论断javascript是或不是已经加载成功的方案:

    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     EventUtil.addHandler(script,'readystatechange',function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if (target.readyState == "loaded" || target.readyState == "complete"){
       EventUtil.removeHandler(target, "readystatechange", arguments. callee);
       alert(script.src);
      }
     });
     script.src = 'a.js';
     document.body.appendChild(script); 
    });
    

    上边我们得以行使javascript客户端检验技能来判别是或不是是IE和其它规范浏览器做贰个简单易行的包裹;如下代码:

    var ua = navigator.userAgent.toLowerCase();
    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     if(/msie ([^;] )/.test(ua) || "ActiveXObject" in window) {
      // IE 浏览器
      EventUtil.addHandler(script,'readystatechange',function(event){
       event = EventUtil.getEvent(event);
       var target = EventUtil.getTarget(event);
       if (target.readyState == "loaded" || target.readyState == "complete"){
        EventUtil.removeHandler(target, "readystatechange", arguments. callee);
        console.log("javascript已经加载完成");
       }
      });
     }else {
      // 除IE之外的标准浏览器
      EventUtil.addHandler(script,'load',function(event){
       console.log("javascript已经加载完成");
      });
     }
     script.src = 'a.js';
     document.body.appendChild(script);
    });
    

    地点的是针对性具备的机要的浏览器实行包装来判断动态加载的JS是或不是已经加载成功!

    略知一二动态加载行内JS格局

    另一种加载javascript代码的点子是行内格局,如下代码:

    复制代码 代码如下:
    <script src=”text/javascript”>
           function sayHi(){alert(1);}
    </script>

    从理论来说,上边包车型地铁代码应该是行得通的;

    复制代码 代码如下:
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));
    document.body.appendChild(script);

    如上代码在firefox,IE9 ,chrome和opera中,都以符合规律的,能够运作的,可是在IE8及以下会报错,如下:

    新葡亰496net 2

    IE8及以下将script视为多个奇异的因素,不允许dom访问其子节点;不过大家得以采取script元素的text属性来钦点javascript代码,如下代码:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = "function sayHi(){alert(1);} sayHi()";
    document.body.appendChild(script);
    

    今昔在具有的主流的浏览器都以正规的,在IE8及以下也是常规的;可是在safari3.0在此之前的版本不能够精确的援助text属性,但能够允许采用文本节点来钦点代码;如下代码:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    var code = "function sayHi(){alert(1);} sayHi()";
    try{
     script.appendChild(document.createTextNode(code));
    }catch(e){
     script.text = code;
    }
    document.body.appendChild(script);
    

    上边大家可以选取多个函数来封装下;如下代码:

    function loadScriptString(code) {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     try{
      script.appendChild(document.createTextNode(code));
     }catch(e){
      script.text = code;
     }
     document.body.appendChild(script);
    }
    loadScriptString("function sayHi(){alert(1);} sayHi()");
    

    通晓动态加载css样式

    与动态脚本类似,所谓动态样式是指在页面刚载入时不设有的样式,动态样式是在页面加载成功后动态增加到页面中的;

    动态加载样式如下代码:

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

    如上代码就能够动态生成css样式;

    大家也得以像JS一样先封装多个函数,为了调用特别平价;如下代码:

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

    我们也足以利用事件的艺术来判定css动态加载是还是不是早已加载成功~

    EventUtil.addHandler(window,'load',function(){
     var link = document.createElement("link");
     link.rel = "stylesheet";
     link.type = "text/css";
     EventUtil.addHandler(link, "load", function(event){
      console.log("css loaded");
     });
     link.href = "style.css";
     document.getElementsByTagName("head")[0].appendChild(link);
    });
    

    专注:如上代码:不止在专门的学问浏览器下chrome,firefox,opera下援救,而且IE7-10都援助这种加载;不过safari不协理这种加载;

    要么和javascript一样,大家也能够针对IE下做一种那样的管理;代码如下,也得以支撑具有的IE下:

    EventUtil.addHandler(window, "load", function(){
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel= "stylesheet";
     EventUtil.addHandler(link, "readystatechange", function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if (target.readyState == "loaded" || target.readyState == "complete"){
       EventUtil.removeHandler(target, "readystatechange", arguments. callee);
       alert("CSS Loaded");
      }
     });
     link.href = "style.css";
     document.getElementsByTagName("head")[0].appendChild(link);
    });
    

    我们也足以像Javascript一样,为了判别全数的浏览器下帮衬能够打包四个享有都援救的代码;当然除safari浏览器除此之外,好像safari浏览器未有生效;

    一般来讲代码:

    var ua = navigator.userAgent.toLowerCase();
    EventUtil.addHandler(window,'load',function(){
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel= "stylesheet";
     if(/msie ([^;] )/.test(ua) || "ActiveXObject" in window) {
      // IE 浏览器
      EventUtil.addHandler(link,'readystatechange',function(event){
       event = EventUtil.getEvent(event);
       var target = EventUtil.getTarget(event);
       if (target.readyState == "loaded" || target.readyState == "complete"){
       EventUtil.removeHandler(target, "readystatechange", arguments. callee);
        alert("css已经加载完成");
       }
      });
     }else {
      // 除IE之外的标准浏览器
      EventUtil.addHandler(link,'load',function(event){
       alert("css已经加载完成");
      });
     }
     link.href = "style.css";
     document.getElementsByTagName("head")[0].appendChild(link);
    });
    

    另一种概念样式的不二秘技是利用<style>成分来含有嵌入式的css

    一般来讲所示代码:

    <style>

    body {background-color:red;}

    </style>

    根据同样的法则,下边包车型大巴代码除了IE8及以下不扶助,别的浏览器下都支持;如下代码:

    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode("body{background-color:red}"));
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
    

    之所以大家也足以像JS一样包裹七个全包容的css样式;如下代码所示:

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

    为了更实惠调用,由此大家也得以打包三个函数来;如下代码:

    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);
    }
    // 调用方式如下:
    loadStyleString("body{background-color:red}");
    

    DOM的扩展

    1. querySelector()方法

    querySelector()方法接收二个css选用符,重回与该方式相称的第二个成分,如若未有找到相称成分,则赶回null;如下代码:

    复制代码 代码如下:
    <div id="test">test</div>
    <div class="cls">1111</div>
    <div class="cls">2222</div>
    <div class="cls">2222</div>

    JS代码如下:

    // 取得body
    var body = document.querySelector('body');
    console.log(body); // body的引用
    // 取得id为test的元素
    var test = document.querySelector("#test");
    console.log(test); // <div id="test">test</div>
    // 取得类为cls的第一个元素
    var cls = document.querySelector(".cls");
    console.log(cls); // <div class="cls">1111</div>
    

    同理大家也得以通过Element类型调用querySelector()方法时,只会在该因素后代范围内寻觅匹配的因素,如下代码:

    复制代码 代码如下:
    <div class="testParent">
    <p>1111</p>
    <p>2222</p>
    </div>

    自家想透过先拿走div中的testParent,然后再获得p成分(通过querySelector方法);如下代码:

    var testParent = document.querySelector('.testParent');
    var pfirst = testParent.querySelector("p");
    console.log(pfirst); // <p>1111</p>
    

    浏览器支持程度:IE8 ,firefox,chrome,safari3.1 ,opera10

    2. querySelectorAll()方法

    querySelectorAll()方法接收的参数与querySelector()方法同样,都以三个css选拔符,不过回到的是负有相配的因素,那么些措施重返的是二个NodeList的实例。

    如下代码演示:

    <div id="test">
     <em class="selected">11111</em>
     <em class="selected">22222</em>
     <em>33333</em>
     <em>44444</em>
    </div>
    

    JS代码如下:

    // 取得div中所有em元素
    var em = document.getElementById("test").querySelectorAll('em');
    console.log(em); // NodeList
    console.log(em.length); // 4
    
    // 第二种方式 也可以先使用querySelector
    var test = document.querySelector("#test");
    var em2 = test.querySelectorAll('em');
    console.log(em2); // NodeList
    console.log(em2.length); // 4
    
    // 取得类为selected的所有元素
    var selected = document.querySelectorAll('.selected');
    console.log(selected); // <em class="selected">11111</em>
        // <em class="selected">22222</em>
    // 也可以通过以下的方式获得所有的em元素
    var em = document.querySelectorAll('div em');
    console.log(em); // NodeList
    console.log(em.length); // 4
    

    要获得再次来到的NodeList中的每三个成分,能够行使item()方法,也能够动用方括号的语法;

    var ems = document.querySelectorAll('#test em');
    for(var i = 0, ilen = ems.length; i < ilen; i  ) {
     console.log(ems[i]); // 取得每一项em
     console.log(ems.item(i)); // 取得每一项em
    }
    

    浏览器支持程度:IE8 ,firefox,chrome,safari3.1 ,opera10

    3. matchesSelector()方法

    这一个主意接收一个参数,即css选用符,如果调用成分与该选用符相称,再次来到true,不然,重临false;

    一般来讲代码:

    console.log(document.body.webkitMatchesSelector("body")); // true

    IE9 通过msMatchesSelector()协助该方法,Firefox3.6 通过mozMatchesSelector()协助该办法;safari5 和chrome通过webkitMatchesSelector()帮忙该措施;因此大家能够打包多少个函数,如下代码:

    function matchesSelector(element,selector) {
    if(element.MatchesSelector) {
     return element.MatchesSelector(selector);
    }else if(element.msMatchesSelector) {
     return element.msMatchesSelector(selector);
    }else if(element.webkitMatchesSelector) {
     return element.webkitMatchesSelector(selector);
    }else if(element.mozMatchesSelector) {
     return element.mozMatchesSelector(selector);
    }else {
      throw new Error("Not supported");
     }
    }
    console.log(matchesSelector(document.body,'body')); // true
    var test = document.querySelector('#test');
    console.log(matchesSelector(test,'#test')); // true
    

    4. getElementsByClassName() 方法

    该形式接收三个参数,即包涵叁个依然三个类名的字符串,再次来到带有钦赐类的享有因素的NodeList;传入多个类名时,类名的先后顺序不重大。

    复制代码 代码如下:
    <p class="p1">111</p>
    <p class="p1">222</p>
    <p class="p1">333</p>

    console.log(document.getElementsByClassName("p1")); // 返回NodeList

    支撑getElementsByClassName()方法的浏览器有IE9 ,firefox3 ,safari3.1 ,chrome和opera9.5 ;

    5. classList属性

    正如代码:

    <div class="aa bb cc" id="div">aaa</div>

    本身想删除aa这一个类名的时候,在此以前必要如下写代码:

    var div = document.getElementById("div");
    // 首先,取得类名字符串并拆分成数组
    var classNames = div.className.split(/s /);
    var pos = -1,
      i, 
     len;
    for(i = 0,len = classNames.length; i < len; i =1) {
     if(classNames[i] == 'aa') {
      pos = i;
      break;
     }
    }
    // 删除类名
    classNames.splice(i,1);
    // 把剩下的类名拼成字符串并重新设置
    div.className = classNames.join(" "); 
    // <div class="bb cc" id="div">aaa</div>
    

    可是未来HTML5增加产量了一种操作类名的点子,可以让操作更简便易行也更低价,那就是持有因素加多classList属性。那几个classList属性是新会集类型DOMTokenList的实例;DOMTokenList有贰个象征本人饱含多少成分的length属性,而要获得每种成分得以利用item()方法,也能够选取中括号;

    还应该有以下措施:

    add(value):将加以的字符串值加多到列表中。假若值已经存在,就不增多了。
    contains(value):表示列表中是否存在给定的值,倘若存在则赶回true,不然再次回到false。
    remove(value):从列表中删去给定的字符串。
    toggle(value):假使列表中早已存在给定的值,删除它;如若列表中没有给定的值,加多它。
    今昔我们能够来探视使用方面包车型客车方式的亮点如下,大家得以来做个demo,代码如下:

    <div class="aa bb cc" id="div">aaa</div>

    JS如下:

    var div = document.getElementById("div");
    // 删除类名aa,如下方法即可
    div.classList.remove("aa");
    // html结构如下: <div class="bb cc" id="div">aaa</div>
    // 添加类名current,如下方法即可
    div.classList.add("current");
    // html结构变为如下 <div class="bb cc current" id="div">aaa</div>
    
    // 切换aa类名
    div.classList.toggle("aa");
    // html结构变为如下 <div class="aa bb cc current" id="div">aaa</div>
    // 确定元素是否包含类名;
    console.log(div.classList.contains("aa")); // true
    

    帮衬classList属性的浏览器有IE10 ,firefox3.6 和chrome

    HTML5新扩充自定义数据属性

    HTML5中分明可认为因素增多非标准的性子,但要增添前缀data-,举个例子如下代码:

    <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

    增多了自定义属性之后,能够经过成分的dataset属性来访问自定义属性的值,dataset属性的值是DOMStringMap的四个实例,也正是三个名值对的映射;比方如下代码:

    //本例中使用的方法仅用于演示
    var div = document.getElementById("myDiv");
    console.log(div.dataset); // DOMStringMap {value: "12345", name: "Nicholas"}
    //取得自定义属性的值
    var value1 = div.dataset.value;
    console.log(value1); // 12345
    var name1 = div.dataset.name;
    console.log(name1); // Nicholas
    //设置值
    div.dataset.value = 23456;
    div.dataset.name = "Michael";
    //有没有"myname"值呢?
    if (div.dataset.name){
     console.log("Hello, "   div.dataset.name); // Hello, Michael
    }
    

    新葡亰496net 3

    浏览器帮衬的档期的顺序有;firefox6 和chrome浏览器;

    一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的全体节点类型达成。每...

    1、概况


    Element 类型用于表现 HTML 或 XML 元素,提供了对元素标具名、子节点及特点的拜会。 Element 节点有所以下特点:

    1. nodeType 的值为 1
    2. nodeName 的值为成分的标签名
    3. nodeValue 的值为null
    4. parentNode 可能是 Document 或者 Element
    5. 其子节点大概是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

    要访问成分的标具名,能够用 nodeName 属性,也足以用 tagName 属性;这两个属性会再次回到一样的值。在 HTML 中,标具名始终都以任何大写表示,而在 XML(临时候也席卷 XHTML)中,标具名始终和源代码中保持一致。假若你不分明自个儿的剧本将会在 HTML 依然 XML 文书档案中实施,最棒照旧在比较前面将标签字转变来同样的轻重缓急写情势:

    JavaScript

    var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 那样最佳,适用于其余文档 // ... }

    1
    2
    3
    4
    5
    6
    7
    var myDiv = document.querySelector('div');
    console.log(myDiv.tagName);  // DIV
    console.log(myDiv.nodeName);  // DIV
     
    if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
      // ...
    }

    DOM1级定义了二个Node接口,该接口是由DOM中的全部节点类型落成。每一个节点都有三个nodeType属性,用于阐明节点的种类,节点类型在Node类型中有以下二种:

    attribute翻译成汉语术语为“天性”,property翻译成中文术语为“属性”,从普通话的字面意思来看,确实是有一点点分别了,先来讲说attribute。

    attribute翻译成中文术语为“性格”,property翻译成汉语术语为“属性”,从粤语的字面意思来看,确实是有一点点分别了,先来讲说attribute。

    2、HTML 元素


    抱有 HTML 成分都由 HTMLElement 类型表示,不是一贯通过那一个类型,也是经过它的子类型来表示。 HTMLElement 类型直接接轨自 Element 并增加了有的性能。各类 HTML 成分中都设有下列规范属性:

    1. id 成分在文书档案中的唯一标记符
    2. title 有关因素的叠合表达音信,一般经过工具指示条展现出来
    3. lang 成分内容的语言代码,非常少使用
    4. dir 语言的主旋律,值为 ltr 或者 rtl,也异常少使用
    5. className 与成分的 class 个性对应

    Node.ELEMENT_NODE(1); 成分节点
    Node.ATTRIBUTE_NODE(2); 属性节点
    Node.TEXT_NODE(3); 文本节点
    Node.DOCUMENT_NODE(9); 文书档案节点

    attribute是二个特色节点,各样DOM成分都有三个对应的attributes属性来存放全数的attribute节点,attributes是贰个类数组的容器,说得正确点正是NameNodeMap,同理可得就是八个类似数组但又和数组不太雷同的容器。attributes的每一个数字索引以名值对(name=”value”)的花样存放了一个attribute节点。

    attribute是叁特性剧情点,每一个DOM成分都有八个应和的attributes属性来存放在全数的attribute节点,attributes是多少个类数组的器皿,说得准确点便是NameNodeMap,综上可得正是三个近乎数组但又和数组不太同样的容器。attributes的每种数字索引以名值对(name=”value”)的款型存放了贰个attribute节点。

    3、天性的获得和安装


    每一个成分都有二个或多少个特点,那些特点的用处是付诸相应成分或其剧情的增大消息。操作特性的 DOM 方法主要有八个,分别是getAttribute() setAttribute() removeAttribute()

    注意,传递给 getAttribute() 的天性名与实际的特色名同样,因而要想获取 class 性格值,应该传入 class 而不是 className,后者唯有在通过对象属性(property)访问性马时才用。假若给定称号的风味不存在,getAttribute() 返回 null。

    <div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id='myDiv' title='hanzichi'> </div>
    <script>
      var myDiv = document.querySelector('div');
     
      // attribute
      console.log(myDiv.getAttribute('id')); // myDiv
      console.log(myDiv.getAttribute('class')); // null
      console.log(myDiv.getAttribute('title')); // hanzichi
      console.log(myDiv.getAttribute('lang')); // null
      console.log(myDiv.getAttribute('dir')); // null
     
      // property
      console.log(myDiv.id); // myDiv
      console.log(myDiv.className); // ''
      console.log(myDiv.title); // hanzichi
      console.log(myDiv.lang); // ''
      console.log(myDiv.dir); // ''
    </script>

    透过 getAttribute() 方法也能够拿走自定义性情。

    在事实上支出中,开采职员一时用 getAttribute(),而是只行使对象的性质(property)。只有在赢得自定义特性值的意况下,才使用getAttribute() 方法。为啥吗?举个例子说 style,在通过 getAttribute() 访问时,返回的 style 天性值包涵的是 css 文本,而由此属性来访问会再次来到二个对象。再举例 onclick 那样的事件管理程序,当在要素上利用时,onclick 性格包括的是 Javascript 代码,若是经过 getAttribute() 访问,将会重临相应代码的字符串,而在拜访 onclick 属性时,则会回到 Javascript 函数。

    与 getAttribute() 对应的是 setAttribute(),那么些主意接受五个参数:要安装的特点名和值。假使性情已经存在,setAttribute()会以钦赐的值替换现存的值;假若天性不设有,setAttribute() 则创造该属性并设置相应的值。

    而 removeAttitude() 方法用于深透删除成分的风味。调用这些格局不仅会去掉天性的值,而且也会从要素中完全除去性子。

    JavaScript

    div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

    1
    2
    3
    4
    div.setAttribute('id', 'someOtherId');
    div.setAttribute('title', 'some other text');
     
    div.removeAttribute('class')

    实际上还会有许各种,可是那多少个都不是很常用,所以就来掌握那其间4种就能够了,大家先来探视节点类型,比方如下代码:

    复制代码 代码如下:

    复制代码 代码如下:

    4、attributes 属性


    Element 类型是行使 attributes 属性的唯一八个 DOM 节点类型。 attributes 属性中带有多少个 NamedNodeMap,与 NodeList 类似,也是一个“动态”的联谊。成分的每三个表征都由贰个 Attr 节点表示,各个节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象具有下列方法:

    1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
    2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
    3. setNamedItem(node): 向列表中增加节点,以节点的 nodeName 属性为索引
    4. item(pos): 再次来到位于数字 pos 地点处的节点

    attributes 属性中富含一各个的节点,每一个节点的 nodeName 正是特色的名目,而节点的 nodeValue 正是特色的值。

    JavaScript

    // 获得成分的特色值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能促成均等功用var id = element.getAttribute('id'); // 与removeAttribute() 方法相比较,唯一的区分是能回来表示被剔除天性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 增添新天性 // 供给传入多个特性节点 element.attributes.setNamedItem(newAttr);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 取得元素的特性值
    var id = element.attributes.getNamedItem('id').nodeValue;
    var id = element.attributes['id'].nodeValue;
     
    // getAttribute() 也能实现一样功能
    var id = element.getAttribute('id');
     
    // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
    var oldAttr = element.attributes.removeNamedItem('id');
     
    // 添加新特性
    // 需要传入一个特性节点
    element.attributes.setNamedItem(newAttr);

    一般的话,由于后面介绍的 attributes 方法非常不够方便,由此开辟人士越来越多的会使用 getAttribute() removeAttribute() 以及setAttribute() 方法。

    唯独只要想要遍历成分的性状,attributes 属性倒是能够派上用场:

    <div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i ) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id='myDiv' title='hanzichi' class='fish'> </div>
    <script>
      var myDiv = document.querySelector('div');
      for (var i = 0, len = myDiv.attributes.length; i < len; i ) {
        var attrName = myDiv.attributes[i].nodeName
          , attrValue = myDiv.attributes[i].nodeValue;
     
        console.log(attrName, attrValue);
      }
     
      // id myDiv
      // title hanzichi
      // class fish
    </script>

    HTML代码如下:

    <div class="box" id="box" gameid="880">hello</div>

    <div class="box" id="box" gameid="880">hello</div>

    5、成分的子节点


    <ul id='myUl'> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 3 其余浏览器: 7 </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul id='myUl'>
      <li> Item 1 </li>
      <li> Item 2 </li>
      <li> Item 3 </li>
    </ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
    </script>

    上述代码,假如是 IE 来分析,那么 <ul> 成分会有 3 个子节点,分别是 3 个 <li> 成分;而只借使任何浏览器深入分析,则会有 7 个子节点,包罗 3 个 <li> 元素 和 4 个公文节点。

    借使像上面那样将成分之间的空白符删除,那么全体浏览器都会回到同样数量的子节点:

    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 全部浏览器: 3 </script>

    1
    2
    3
    4
    5
    6
    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // 所有浏览器: 3
    </script>

     

    打赏援助作者写出越来越多好文章,多谢!

    打赏作者

    <div id="test">
     <p>aaaaaa</p>
     <p>bbbbbb</p>
     <p>cccccc</p>
    </div>
    

    上边的div成分的HTML代码中有class、id还恐怕有自定义的gameid,那么些特征都存放在attributes中,类似下边的样式:

    地点的div成分的HTML代码中有class、id还也许有自定义的gameid,这个特色都存放在attributes中,类似上面包车型大巴样式:

    打赏支持本身写出越来越多好文章,多谢!

    新葡亰496net 4

    1 赞 1 收藏 评论

    JS如下:

    复制代码 代码如下:

    复制代码 代码如下:

    关于笔者:韩子迟

    新葡亰496net 5

    a JavaScript beginner 个人主页 · 小编的小说 · 9 ·    

    新葡亰496net 6

    var test = document.getElementById("test");
    if(test.nodeType === Node.ELEMENT_NODE) {
     alert(1)
    }
    

    [ class="box", id="box", gameid="880" ]

    [ class="box", id="box", gameid="880" ]

    如上代码在IE8及以下下是不行的,会报错,如下:

    可以如此来拜会attribute节点:

    能够这么来做客attribute节点:

    新葡亰496net 7

    复制代码 代码如下:

    复制代码 代码如下:

    因为IE未有公开Node类型的构造函数,因而在IE8-下会有不当,不过大家能够通过数值来比较,举例上边的要相比较成分节点的话,大家得以应用1来相比较,同理属性节点是2,文本节点是3;如下代码:

    var elem = document.getElementById( 'box' );
    console.log( elem.attributes[0].name ); // class
    console.log( elem.attributes[0].value ); // box

    var elem = document.getElementById( 'box' );
    console.log( elem.attributes[0].name ); // class
    console.log( elem.attributes[0].value ); // box

    var test = document.getElementById("test");
    // 下面的所有的浏览器都支持
    if(test.nodeType == 1) { 
      alert(1)
    }
    

    可是IE6-7将广大东西都存放在attributes中,下边包车型地铁拜会方法和专门的学业浏览器的回到结果又区别。平日要拿走一个attribute节点直接用getAttribute方法:

    可是IE6-7将洋洋事物都存放在attributes中,上面包车型客车走访方法和行业内部浏览器的回到结果又区别。经常要博取一个attribute节点直接用getAttribute方法:

    理解nodeName与nodeValue

    复制代码 代码如下:

    复制代码 代码如下:

    nodeName保存的是因素的标具名,而nodeValue一般都以null;大家得以看如下代码,未有异样的验证,HTML代码都以地点的,由此那边就不贴代码了;如下JS代码测试:

    console.log( elem.getAttribute('gameid') ); // 880

    console.log( elem.getAttribute('gameid') ); // 880

    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     console.log(test.nodeName); // 打印DIV
     console.log(test.nodeValue); // 打印null
    }
    

    要安装贰个attribute节点使用setAttribute方法,要去除就用removeAttribute:

    要设置一个attribute节点使用setAttribute方法,要去除就用removeAttribute:

    接头节点关系

    复制代码 代码如下:

    复制代码 代码如下:

    <!doctype html>
    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>Document</title>
     </head>
     <body>
    </body>
    </html>
    

    elem.setAttribute('testAttr', 'testVal');
    console.log( elem.removeAttribute('gameid') ); // undefined

    elem.setAttribute('testAttr', 'testVal');
    console.log( elem.removeAttribute('gameid') ); // undefined

    如上代码,大家得以把head和body是html的子元素,同理html是他俩的父级成分,那么head和body正是兄弟成分了,那么head及body里面包车型大巴便是子成分了,大家供给通晓的是各样节点都有七个childNodes属性,其保存的是临近数组的因素,其也是有length属性,不过她不是数组Array的实例,举个例子大家得以看看如下测试代码就可以:

    attributes是会随着增加或删除attribute节点动态更新的。
    property就是壹脾质量,假如把DOM成分看成是一个一般性的Object对象,那么property便是一个以名值对(name=”value”)的样式存放在Object中的属性。要丰裕和删除property也简要多了,和常见的靶子没啥分别:

    attributes是会随着增进或删除attribute节点动态更新的。
    property正是壹特性能,要是把DOM元素看成是二个常备的Object对象,那么property就是二个以名值对(name=”value”)的花样存放在Object中的属性。要抬高和删除property也简要多了,和经常的靶子没啥分别:

    <div id="test">
     <p>aaaaaa</p>
     <p>bbbbbb</p>
     <p>cccccc</p>
    </div>
    

    复制代码 代码如下:

    复制代码 代码如下:

    JS代码如下:

    elem.gameid = 880; // 添加
    console.log( elem.gameid ) // 获取
    delete elem.gameid // 删除

    elem.gameid = 880; // 添加
    console.log( elem.gameid ) // 获取
    delete elem.gameid // 删除

    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     console.log(test.childNodes);
     console.log(test.childNodes.length);
    }
    

    据此attribute和property轻巧混倄在联合具名的来由是,大多attribute节点还会有贰个相呼应的property属性,举例上边的div成分的id和class既是attribute,也可能有对应的property,不管选择哪一种方法都能够访问和修改。

    故而attribute和property轻松混倄在同步的缘由是,诸多attribute节点还应该有三个相呼应的property属性,例如上边的div成分的id和class既是attribute,也会有对应的property,不管接纳哪一种方法都能够访问和改造。

    如上代码,在正儿八经浏览器下及IE9 下 第一行打字与印刷如下:

    复制代码 代码如下:

    复制代码 代码如下:

    [text, p, text, p, text, p, text, item: function]

    console.log( elem.getAttribute('id') ); // box
    console.log( elem.id ); // box
    elem.id = 'hello';
    console.log( elem.getAttribute('id') ); // hello

    console.log( elem.getAttribute('id') ); // box
    console.log( elem.id ); // box
    elem.id = 'hello';
    console.log( elem.getAttribute('id') ); // hello

    其次行打字与印刷7 长度为7,因为他俩把文件节点那些空格也包蕴进去了,可是在IE8及以下,长度为3,他们不蕴涵文件空格的节点,由此想要统一的话,大家得以编写制定HTML代码去掉空格,如下HTML代码就能够;

    只是对于自定义的attribute节点,大概自定义property,两个就不曾涉嫌了。

    唯独对于自定义的attribute节点,只怕自定义property,两个就向来不关系了。

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

    复制代码 代码如下:

    复制代码 代码如下:

    其一主题素材稍后在精心思量,大家今后来看看哪些获得子成分,大家得以选拔2种方法,第一种是利用中括号[index]目录,第二种是行使item[index]目录,如下代码:

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // undefined
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // null

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // undefined
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // null

    console.log(test.childNodes[1]); // <p>bbbbbb</p>
    console.log(test.childNodes.item(1)); // <p>bbbbbb</p>

    对此IE6-7来讲,没有区分attribute和property:

    对此IE6-7来讲,未有区分attribute和property:

    不过她们并不是数组,我们得以测试下代码就可以,如下代码:

    复制代码 代码如下:

    复制代码 代码如下:

    console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]");
    // false但是大家使其改造为数组,如下代码:

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // 880
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // 900

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // 880
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // 900

    //在IE8 及在此以前版本中没用
    var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
    console.log(arrayOfNodes instanceof Array);

    成都百货上千新手朋友估摸都很轻便掉进这么些坑中。
    DOM成分一些暗中认可常见的attribute节点都有与之相应的property属性,比较非凡的是有的值为Boolean类型的property,如有的表单成分:

    好些个菜鸟朋友推测都很轻便掉进这么些坑中。
    DOM成分一些私下认可常见的attribute节点都有与之相应的property属性,相比新鲜的是一些值为Boolean类型的property,如有些表单成分:

    // true然则在IE8及前边不奏效;由于IE8及更早版本将NodeList完成为贰个COM对象,而大家不能够像使用JScript对象那样采纳对象,要想在IE低版本中更改为Array的款型,大家能够像下边同样包裹三个措施就可以;

    复制代码 代码如下:

    复制代码 代码如下:

    function convertToArray(nodes){
     var array = null;
     try {
      array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
     } catch (ex) {
      array = new Array();
      for (var i=0, len=nodes.length; i < len; i  ){
       array.push(nodes[i]);
      }
     }
     return array;
    }
    var test = document.getElementById("test");
    var testArray = convertToArray(test.childNodes);
    console.log(testArray instanceof Array); // true
    

    <input type="radio" checked="checked" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // checked
    console.log( radio.checked ); // true

    <input type="radio" checked="checked" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // checked
    console.log( radio.checked ); // true

    领悟parentNode(父节点),previousSibling(上贰个弟兄节点),nextSibling(下三个小伙子节点);

    对于那个特其他attribute节点,唯有存在该节点,对应的property的值就为true,如:

    对此这几个出色的attribute节点,唯有存在该节点,对应的property的值就为true,如:

    种种节点都有一个parentNode属性,该属性指向文书档案中父节点,previousSibling是指当前节点的上多个亲生节点,nextSibling是指当前节点的下叁个同胞节点,譬如如下代码:

    复制代码 代码如下:

    复制代码 代码如下:

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     var secodeChild = test.childNodes[1];
     console.log(secodeChild); // <p>bbbbbb</p>
     console.log(secodeChild.previousSibling); // <p>aaaaaa</p>
     console.log(secodeChild.nextSibling); // <p>cccccc</p>
    }
    

    <input type="radio" checked="anything" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // anything
    console.log( radio.checked ); // true

    <input type="radio" checked="anything" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // anything
    console.log( radio.checked ); // true

    万一该节点列表中唯有贰个节点的话,那么该节点的previousSibling和nextSibling都为null;父节点的firstChild指向了父节点中第三个节点;如下代码:

    终极为了更好的分别attribute和property,基本得以总括为attribute节点都以在HTML代码中可见的,而property只是一个经常的名值对质量。

    最后为了更加好的区分attribute和property,基本得以总计为attribute节点都是在HTML代码中可知的,而property只是一个平凡的名值对品质。

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    复制代码 代码如下:

    复制代码 代码如下:

    JS如下:

    // gameid和id都是attribute节点
    // id相同的时候又能够经过property来访问和退换
    <div gameid="880" id="box">hello</div>
    // areaid仅仅是property
    elem.areaid = 900;

    // gameid和id都是attribute节点
    // id同期又能够因而property来访问和修改
    <div gameid="880" id="box">hello</div>
    // areaid仅仅是property
    elem.areaid = 900;

    var test = document.getElementById("test");
    if(test.nodeType == 1) { 
     console.log(test.firstChild); // <p class="a">aaaaaa</p>
     console.log(test.lastChild); // <p class="c">cccccc</p>
    }
    

    ...

    您或者感兴趣的小说:

    • JavaScript中的property和attribute介绍
    • javascript 对象属性property与成分属性attribute的浏览器帮忙
    • JavaScript中property和attribute的界别详细介绍
    • JS中DOM成分的attribute与property属性示例详解

    父节点的firstChild始终等于父节点的.childNodes[0],父节点的lastChild始终等于父节点的.childNodes[父节点的.childNodes.length

    • 1]; 如下代码:
    console.log(test.firstChild === test.childNodes[0]); // true
    console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true
    

    假设未有子节点的话,那么firstChild和lastChild都针对为空null;

    hasChildNodes():如若急需决断该父节点有未有子节点的话,能够运用该办法判别,再次回到的是七个布尔型,有重回true,未有回去false,如下代码:

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    JS代码如下:

    var test = document.getElementById("test");
    console.log(test.hasChildNodes());

    // true假使是之类的 就回来false;如下代码:

    <div id="test"></div>
    var test = document.getElementById("test");
    console.log(test.hasChildNodes()); // false

    ownerDocument: 全体节点都有最后两脾特性是ownerDocument,该属性指向表示整个文书档案的文书档案节点,这种关联表示的别的节点都属于它所在的文书档案,任何节点都不能够同一时候存在七个或更加多文书档案中,通过那特性情,大家得以不用在节点等级次序中经过层层回溯达到最上端,而是能够直接待上访问文书档案节点;如下测试代码:

    <div id="test">
     <p class="a">11</p>
    </div>
    var test = document.getElementById("test");
    console.log(test.ownerDocument); // document
    var p = test.ownerDocument.getElementsByTagName("p");
    console.log(p); // <p class="a">11</p>
    

    appendChild(): 用于向childNodes列表的最后加多一个节点;重临的是新增的节点;如下代码:

    <div id="test">
    <p class="a">11</p>
    </div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("p");
    var returnNode = test.appendChild(newNode);
    console.log(returnNode); // <p></p>
    console.log(returnNode === newNode); // true
    console.log(test.lastChild === newNode); // true
    

    insertBefore(): 该格局是将新节点插入到钦点的节点的前面去,该方法接收2个参数,要插入的节点和作为参照他事他说加以考察的节点;插入节点后,被插入的节点会化为参照节点的前三个亲生节点,同一时候被艺术重回,如下代码:

    <div id="test">
    <p class="a">11</p>
    </div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,test.childNodes[0]);
    console.log(returnNode); // <div></div>
    console.log(returnNode === newNode); // true
    

    插入节点后,结构形成如下:

    复制代码 代码如下:

    <div id="test">
    <div></div>
    <p class="a">11</p>
    </div>

    而是只要参照节点为null的话,那么就能够把新节点插入到最后面去了,如下代码:

    复制代码 代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,null);

    插入后HTML结构如下:

    复制代码 代码如下:

    <div id="test">
        <p class="a">11</p>
        <div></div>
    </div>

    小编们仍是能够更加尖锐的看下如下测试代码:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 插入后成为最后一个节点
    var returnNode = test.insertBefore(newNode,null);
    console.log(returnNode === test.lastChild); // true 
    // 插入后成为第一个节点
    var returnNode = test.insertBefore(newNode,test.firstChild);
    console.log(returnNode === newNode); // true
    console.log(newNode === test.firstChild); // true
    // 插入到最后一个子节点的前面
    var returnNode = test.insertBefore(newNode,test.lastChild);
    console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true
    

    replaceChild(); 该措施接收2个参数,要插入的节点和要替换的节点,要替换的节点将由那么些方法重返并从文书档案树中被移除,同时由插入的节点攻克其义务,如下代码:

    <div id="test"><p class="a">11</p><p class="b">22</p></div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换第一个节点
    var returnNode = test.replaceChild(newNode,test.firstChild);
    console.log(returnNode); // <p class="a">11</p>
    

    轮换后html代码结构形成如下:

    <div id="test"><div></div><p class="b">22</p></div>

    轮换最终一个节点代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换最后一个节点
    var returnNode = test.replaceChild(newNode,test.lastChild);
    console.log(returnNode); // <p class="b">22</p>
    

    轮换后的代码如下:

    <div id="test"><p class="a">11</p><div></div></div>removeChild():移除节点,该方法接收二个参数,即要移除的节点;

    被移除的节点将改为重临值,如下代码:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 移除第一个节点
    var returnNode = test.removeChild(test.firstChild);
    console.log(returnNode); // <p class="a">11</p>
    

    移除后的代码结构产生如下:

    <div id="test"><p class="b">22</p></div>

    移除最后三个节点的代码如下:

    // 移除最终三个节点
    var returnNode = test.removeChild(test.lastChild);
    console.log(returnNode); // <p class="b">22</p>
    移除后的代码结构变为如下:

    <div id="test"><p class="a">11</p></div>cloneNode():

    仿造三个均等的别本,该办法接收贰个布尔值参数,借使为true的话,表达是深复制,复制该节点及全数子节点书,倘使为false的话,只复制该节点自个儿,譬喻如下代码:

    var test = document.getElementById("test");
    var deeplist = test.cloneNode(true);
    console.log(deeplist);
    // <div id="test"><p class="a">11</p><p class="b">22</p></div>
    如果是浅复制的如下代码:
    var test = document.getElementById("test");
    var deeplist = test.cloneNode(false);
    console.log(deeplist);// <div id="test"></div>
    

    Document类型

    JS通过Document类型表示文书档案,document传承HTMLDocument(继承自Document)类型的三个实例,表示一切HTML页面。document对象是window的三个属性,所以能够由此全局对象来拜会,document对象有如下特征:

    nodeType值为9,
    nodeName值为”#document”,
    nodeValue值为null,
    parentNode值为null,
    ownerDocument值为null
    了解文书档案document的子节点
    documentElement: 该属性始终本着html成分,如下代码:
    console.log(document.documentElement); // 指向html的引用
    即使急需直接访问html成分的引用能够直接选择该因素更加快,更便于。
    childNodes: 通过childNodes列表访问文书档案成分;如下测试代码:

    console.log(document.documentElement); // 指向html的引用
    console.log(document.childNodes[0]); // <!doctype html>
    console.log(document.firstChild); // <!doctype html>
    console.log(document.firstChild === document.childNodes[0]); // true
    console.log(document.body); // 指向body的引用
    

    不无的浏览器都帮衬document.documentElement 和 document.body属性;

    title:  通过那天性格可以获取网页的标题,如下测试代码:

    console.log(document.title);

    也足以该方法设置网页的标题;如下代码:

    document.title = “笔者是龙恩”;

    U奥迪Q7L:  获得页面香港中华总商会体的url,如下代码测试:

    console.log(document.URL); //

    domain: 该属性包罗页面包车型客车域名;如下测试代码:

    console.log(document.domain); // 127.0.0.1

    域名也得以安装的,比方大规模的跨子域的意况下,大家须求设置同一的父域就可以成功跨域;

    namedItem(): 该办法能够透过成分的name特性取得集结中的项,譬喻将来页面上有大多input的框,作者想通过她们的name属性获得本身想要的哪一项,测试代码如下:

    HTML代码如下:

    <input name="aa"/>
    <input name="bb"/>

    JS代码如下:

    var inputs = document.getElementsByTagName("input");
    console.log(inputs.namedItem("aa")); // <input name="aa"/>

    小编们还是能够因而方括号的语法来访问,如下代码:

    console.log(inputs["aa"]); // <input name="aa"/>

    新葡亰496net:Element节点类型详解,你所不领会的javascript操作DOM的细节知识点。要想赢得文书档案中享有的元素,能够向getElementsByTagName()中传唱”*”; 星号表示整个的意思;

    getElementsByName(); 该方法也是HTMLDocument类型才有的艺术,那么些方法会再次来到带有给定name性格的装有因素,如下测试代码:

    <input name="aa" type="radio"/>
    <input name="aa" type="radio"/>
    var aa = document.getElementsByName("aa");
    console.log(aa); // object
    console.log(aa.length); // 2
    

    该方法也会回来二个HTMLCollection.

    浏览器扶助程度IE,firefox,chrome都补助;

    Element类型

    Element节点有以下特点:

    nodeType的值为1;

    nodeName的值为要素的竹具名;

    nodeValue的值为null;

    parentNode可能是Document或Element

    要访问成分的标签字,能够选用nodeName属性,也足以选择tagName属性,那多少个属性会返回一样的值,如下代码:

    <div id="test"></div>
    var test = document.getElementById("test");
    console.log(test.tagName); // DIV
    console.log(test.nodeName); // DIV
    console.log(test.nodeValue); // null;
    console.log(test.parentNode); // body
    console.log(test.nodeType); // 1
    

    驾驭HTML元素中的获取属性的不二秘籍

    抱有HTML成分都由HTMLElement类型表示,HTMLElement类型直接承袭Element;假使想要取得HTML成分的表征的话,有上面多少个法子:

    getAttribute(); 获取元素的性质的秘诀;如下测试代码:

    <div id="test" class="testName" title="aa"></div>
    var test = document.getElementById("test");
    console.log(test.getAttribute("id")); // test
    console.log(test.getAttribute("class")); // testName
    console.log(test.getAttribute("title")); // aa
    

    在意:上边的获取类名在IE8 及行业内部浏览器下都以使用获取属性class来获得类名,上面的假如在IE7下会回来null, 但是在IE7及以下是利用className那天性格来拿到的;如下代码:在IE7下测试:

    console.log(test.getAttribute("className")); // testName

    本来也得以获得自定义的特性;如下代码:

    <div id="test" data-value="test1"></div>

    console.log(test.getAttribute("data-value")); // test1

    setAttribute() 设置元素的性格;该情势接收2个参数,第二个参数是性质名称,第叁个参数是相应的值;若是该值存在,则会以后天的值替换在此之前的值,假设属性名不设有,则会创立该属性,并钦定该属性的值;如下代码:

    <div id="test"></div>
    // JS代码如下:
    var test = document.getElementById("test");
    test.setAttribute("id",'test');
    test.setAttribute("class","testName");
    test.setAttribute("title","aa");
    test.setAttribute("data-value","test1");
    

    生成HTML结构如下:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    新葡亰496net:Element节点类型详解,你所不领会的javascript操作DOM的细节知识点。removeAttribute(); 删除元素的特征;如下代码:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    JS代码如下:

    var test = document.getElementById("test");
    test.removeAttribute("id");
    test.removeAttribute("class");
    test.removeAttribute("title");
    test.removeAttribute("data-value");
    

    IE7及以下删除类名供给选取className;

    attributes属性

    Element类型是使用attributes属性的唯一三个dom节点类型,attributes属性包蕴一个NamedNodeMap集合;该对象有以下措施:

    getNamedItem(name): 再次回到nodeName属性等于name的节点;

    attributes属性中包涵一名目多数节点,每一个节点的nodeName正是特色的称谓,而节点的nodeValue正是节点值,要博得成分id的风味,如下代码:

    <div id="test" class="testName" title="aa" data-value="test1"></div>JS代码如下:

    复制代码 代码如下:

    var div = document.getElementById("test");
    var id = div.attributes.getNamedItem("id").nodeValue;
    console.log(id);  // test

    咱俩也得以通过中括号的语法来收获的,如下代码:

    复制代码 代码如下:

    var id = div.attributes['id'].nodeValue;
    console.log(id); // test

    一模二样大家也能够经过地点介绍的getAttribute(“id”)方法来博取成分,如下代码:

    console.log(div.getAttribute("id")); // test

    也得以透过以下措施给成分设置id,如下方法:

    div.attributes["id"].nodeValue = "aa";

    removeNamedItem(name): 从列表中移除nodeName属性等于name的节点;

    调用removeNamedItem()方法与在要素上调用removeAttribute()方法的法力同样,是一贯删除全体给定名称的风味。他们中间的区分是:removeNamedItem()方法再次来到表示被剔除本性的节点;

    如下代码:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    JS代码如下:

    复制代码 代码如下:

    var div = document.getElementById("test");
    var oldAttr = div.attributes.removeNamedItem("id");
    console.log(oldAttr); // 再次来到是被剔除的节点  id="test"

    今昔的html结构变为如下:

    <div class="testName" title="aa" data-value="test1"></div>

    如上海艺术剧场术:前段时间IE,firefox,chrome浏览器都辅助;

    可是上面大家有getAttribute,setAttribute(),removeAttribute()方法,大家能够运用这一个措施丰盛替代下边介绍的多少个方法,但是假若想遍历贰个要素上有几天性马时,attributes这一个就能够派上用上了,如下代码:

    HTML代码如下:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    JS代码如下:

    var div = document.getElementById("test");
    function outputAttributes(element) {
     var arrs = new Array();
     var attrName,
       attrValue,
      i,
      len;
     for(i = 0, len = element.attributes.length; i < len; i  ) {
      attrName = element.attributes[i].nodeName;
      attrValue = element.attributes[i].nodeValue;
      arrs.push(attrName   "='"   attrValue   "'");
     }
     return arrs.join(" ");
    }
    console.log(outputAttributes(div));
    

    结果打字与印刷如下:

    id='test' class='testName' title='aa' data-value='test1'

    地点的函数使用二个数组来保存名值对,最终再以空格为分隔符将它们拼接起来,可是地点的代码大家须求小心两点:

    1.对准attributes对象中的个性,不一样的浏览器重返的各种差别。
    2.IE7及更早的本子会回来HTML成分中颇具大概的表征,包蕴未有一些名的表征;
    本着IE7的难题大家能够进行创新,大家都知道,各种天性节点都有一个名称叫specified的品质,这么些属性值假诺为true,则意味着要么在HTML中钦赐了对应的特征,要么通过setAttribute方法设置了该特性,在IE中,全部为设置过的个性该属性的之都为false;如下代码:

    var div = document.getElementById("test");
    function outputAttributes(element) {
     var arrs = new Array();
     var 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) {
        arrs.push(attrName   "='"   attrValue   "'");
      }
     }
     return arrs.join(" ");
    }
    console.log(outputAttributes(div));
    

    接头成分的子节点

    要素得以有自由数目标子节点和后人节点,成分的childNodes属性中它包涵了它的全体子节点,那几个子节点大概是因素,文本节点,注释或处理指令;分化的浏览器子节点的个数不一致,下边我们来探望demo如下:

    <ul id="list">
     <li>11</li>
     <li>22</li>
     <li>33</li>
    </ul>
    

    JS代码如下:

    复制代码 代码如下:

    var list = document.getElementById("list");
    console.log(list.childNodes);
    console.log(list.childNodes.length);

    大家事先在地方讲过,在标准浏览器下(IE9 ,firefox,chrome)下,打字与印刷的长度是7个,因为他们把空格也带有上去,在IE8-及以下的浏览器重回的是3个子元素,那是显现的不荒谬情形下,可是如若自个儿前日把html成分的空格都去掉的话,那么拥有的浏览器都会重临3个子成分,如下代码:

    <ul id="list"><li>11</li><li>22</li><li>33</li></ul>

    JS代码如下:

    复制代码 代码如下:

    var list = document.getElementById("list");
    console.log(list.childNodes);
    console.log(list.childNodes.length);

    那么日常大家不容许都这么小心小意的编排html代码的,因为一步小心就有三个空格产生,因而大家能够如下推断下是还是不是因九秋点;如下代码演示:

    <ul id="list">
     <li>11</li>
     <li>22</li>
     <li>33</li>
    </ul>
    

    JS代码如下:

    var list = document.getElementById("list");
    var arrs = [];
    for(var i = 0, ilen = list.childNodes.length; i < ilen; i  ) {
     var curElement = list.childNodes[i];
     if(curElement.nodeType === 1){
       arrs.push(curElement);
     }
    }
    console.log(arrs); 
    console.log(arrs.length); // 3
    

    如上代码在富有的浏览器都帮助,通过判别该因素是还是不是因三秋点,然后在实践后续操作;不是因素商点都会过滤掉,因而回到的尺寸都为3;

    理解Text类型

    Text节点具备以下特点:

    nodeType的值为3;
    nodeName的值为”#text”;
    nodeValue的值为节点所富含的文书;
    parentNode是一个Element;

    从没子节点;

    1.创立文本节点;
    能够采纳document.createTextNode()成立新文本节点,这一个方法供给多个参数,即要插入的文书,如下代码:

    var element = document.createElement("div");
    var text = document.createTextNode("aa");
    element.appendChild(text); 
    document.body.appendChild(element); 
    
    1. 分开文本节点splitText(offset); 从offset钦赐的地点将日前的文书节点分成2个文本节点;如下代码:
    var element = document.createElement("div");
    var text = document.createTextNode("aabbbccc");
    element.appendChild(text);
    document.body.appendChild(element);
    
    var newNode = element.firstChild.splitText(5);
    console.log(element.firstChild.nodeValue); // aabbb
    console.log(newNode.nodeValue); // ccc 
    console.log(element.childNodes.length); // 2
    

    浏览器支持的水平有IE,firefox,chrome都辅助;

    知道DOM操作—动态插入脚本

    作者们动态插入JS脚本,常见的写法有如下代码就可以插入:

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

    就可以在body最终边动态插如a.js,此动态插入不会堵塞浏览器加载;大家为了特别扩展性,大家也能够打包一个函数,如下代码:

    function loadScript(url) {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = url;
     document.body.appendChild(script);
    }
    loadScript("a.js");
    

    当页面有多个js需求动态插入的话,能够依次调用loadScript函数就能够;
    而是借使大家今日有那样二个必要,动态加载JS完后,笔者想在那前面做点事情,大家都知情,动态加载也能够知道为异步加载,不会杜绝浏览器,可是大家必要什么样通晓动态JS已经加载完了吧?

    作者们事先讲过一篇小说是 “Javascript事件下结论”中有咬定JS动态加载完后使用load事件来监听js是或不是动态加载完,未来大家再来复习下load事件;
    Javascript中最常用的一个风浪是load,当页面加载完后(包括富有的图纸,javascript文件,css文件等外部能源)。就能够触发window上边的load事件;最近可以有2种触发load事件,一种是平素放在body上边触发;比方如下代码:

    <body onload=”a()”></body>

    其次种是经过JS来触发,如下代码:

    复制代码 代码如下:

    EventUtil.addHandler(window,'load',function(event){
          alert(1);
    });

    上边的伊芙ntUtil.addHandler 是大家事先在javascript事件下结论中封装的JS函数,以后我们一贯拿过来使用,如下代码:

    var EventUtil = {
     addHandler: function(element,type,handler) {
      if(element.addEventListener) {
        element.addEventListener(type,handler,false);
      }else if(element.attachEvent) {
       element.attachEvent("on" type,handler);
      }else {
       element["on"  type] = handler;
      }
     },
     removeHandler: function(element,type,handler){
      if(element.removeEventListener) {
        element.removeEventListener(type,handler,false);
      }else if(element.detachEvent) {
       element.detachEvent("on" type,handler);
      }else {
       element["on"  type] = null;
      }
     },
     getEvent: function(event) {
      return event ? event : window.event;
     },
     getTarget: function(event) {
      return event.target || event.srcElement;
     },
     preventDefault: function(event){
      if(event.preventDefault) {
       event.preventDefault();
      }else {
       event.returnValue = false;
      }
     },
     stopPropagation: function(event) {
      if(event.stopPropagation) {
       event.stopPropagation();
      }else {
       event.cancelBubble = true;
      }
     }
    };
    

    下边大家来看看怎样使用JS事件来判定JS是还是不是加载成功的代码,我们得以应用load事件来监听,如下代码:

    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     EventUtil.addHandler(script,'load',function(event){
      console.log(script.src);
     });
     script.src = 'a.js';
     document.body.appendChild(script);
    });
    

    如上代码,script成分也会触发load事件,以便能够规定动态加载jS是或不是加载成功,上面包车型大巴代码钦赐src属性和点名的事件管理程序的风浪能够轮换个方式置,先后顺序不重要,如上代码,大家也足以这样写,如下代码:

    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     script.src = 'a.js';
     document.body.appendChild(script);
     EventUtil.addHandler(script,'load',function(event){
      console.log(script.src);
     });  
    });
    

    此时此刻只有IE9 ,Firefox,opera,chrome和safari3 协助,IE8及以下不扶助该load事件,因而大家须要针对IE8及以下做管理;

    理解readystatechange事件

    IE为DOM文书档案中的有个别部分提供了readystatechange事件,那个事件的指标提供与文书档案或因素的加载的景况有关音讯,此事件提供了上面5个值中的叁个;

    uninitialized(未初叶化):对象存在但并未有早先化;
    loading(正在加载):对象正在加载数据;
    loaded(加载完成): 对象加载数据产生;
    interactive(交互): 能够操作对象了,但从未完全加载;
    complete(完成):对象已经加载成功;

    <script>(在IE和opera)花月<link>(仅IE中)元素也会触发readystatechange事件,可以用来规定外部的javascript和css文件是或不是曾经加载成功,基于成分触发的readystatechange事件,即readyState属性无论等于”loaded”依然”complete”都得以象征财富已经可用;如下针对IE的论断javascript是或不是已经加载成功的方案:

    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     EventUtil.addHandler(script,'readystatechange',function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if (target.readyState == "loaded" || target.readyState == "complete"){
       EventUtil.removeHandler(target, "readystatechange", arguments. callee);
       alert(script.src);
      }
     });
     script.src = 'a.js';
     document.body.appendChild(script); 
    });
    

    下边大家得以行使javascript客户端检查评定本事来决断是还是不是是IE和任何标准浏览器做二个简便的卷入;如下代码:

    var ua = navigator.userAgent.toLowerCase();
    EventUtil.addHandler(window,'load',function(){
     var script = document.createElement("script");
     if(/msie ([^;] )/.test(ua) || "ActiveXObject" in window) {
      // IE 浏览器
      EventUtil.addHandler(script,'readystatechange',function(event){
       event = EventUtil.getEvent(event);
       var target = EventUtil.getTarget(event);
       if (target.readyState == "loaded" || target.readyState == "complete"){
        EventUtil.removeHandler(target, "readystatechange", arguments. callee);
        console.log("javascript已经加载完成");
       }
      });
     }else {
      // 除IE之外的标准浏览器
      EventUtil.addHandler(script,'load',function(event){
       console.log("javascript已经加载完成");
      });
     }
     script.src = 'a.js';
     document.body.appendChild(script);
    });
    

    地点的是针对性全体的根本的浏览器进行打包来决断动态加载的JS是不是早已加载成功!

    知晓动态加载行内JS情势

    另一种加载javascript代码的方法是行内情势,如下代码:

    复制代码 代码如下:

    <script src=”text/javascript”>
           function sayHi(){alert(1);}
    </script>

    从理论来说,下边包车型地铁代码应该是可行的;

    复制代码 代码如下:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));
    document.body.appendChild(script);

    如上代码在firefox,IE9 ,chrome和opera中,都以平常的,能够运转的,可是在IE8及以下会报错,如下:

    新葡亰496net 8

    IE8及以下将script视为二个独竖一帜的成分,不一样意dom访问其子节点;可是大家能够利用script成分的text属性来钦定javascript代码,如下代码:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = "function sayHi(){alert(1);} sayHi()";
    document.body.appendChild(script);
    

    现行在装有的主流的浏览器都以正规的,在IE8及以下也是常规的;可是在safari3.0此前的版本无法科学的支撑text属性,但足以允许利用文本节点来内定代码;如下代码:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    var code = "function sayHi(){alert(1);} sayHi()";
    try{
     script.appendChild(document.createTextNode(code));
    }catch(e){
     script.text = code;
    }
    document.body.appendChild(script);
    

    上面我们得以行使贰个函数来封装下;如下代码:

    function loadScriptString(code) {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     try{
      script.appendChild(document.createTextNode(code));
     }catch(e){
      script.text = code;
     }
     document.body.appendChild(script);
    }
    loadScriptString("function sayHi(){alert(1);} sayHi()");
    

    接头动态加载css样式

    与动态脚本类似,所谓动态样式是指在页面刚载入时不存在的体裁,动态样式是在页面加载成功后动态拉长到页面中的;

    动态加载样式如下代码:

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

    如上代码就可以动态生成css样式;

    大家也足以像JS同样先封装一个函数,为了调用尤其有益于;如下代码:

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

    我们也能够使用事件的主意来剖断css动态加载是还是不是曾经加载成功~

    EventUtil.addHandler(window,'load',function(){
     var link = document.createElement("link");
     link.rel = "stylesheet";
     link.type = "text/css";
     EventUtil.addHandler(link, "load", function(event){
      console.log("css loaded");
     });
     link.href = "style.css";
     document.getElementsByTagName("head")[0].appendChild(link);
    });
    

    留神:如上代码:不唯有在专门的学业浏览器下chrome,firefox,opera下帮衬,而且IE7-10都协理这种加载;可是safari不协理这种加载;

    抑或和javascript同样,大家也得以针对IE下做一种那样的管理;代码如下,也足以帮忙全体的IE下:

    EventUtil.addHandler(window, "load", function(){
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel= "stylesheet";
     EventUtil.addHandler(link, "readystatechange", function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if (target.readyState == "loaded" || target.readyState == "complete"){
       EventUtil.removeHandler(target, "readystatechange", arguments. callee);
       alert("CSS Loaded");
      }
     });
     link.href = "style.css";
     document.getElementsByTagName("head")[0].appendChild(link);
    });
    

    咱俩也能够像Javascript同样,为了推断全数的浏览器下援救能够打包三个全体都协理的代码;当然除safari浏览器除却,好像safari浏览器未有收效;

    正如代码:

    var ua = navigator.userAgent.toLowerCase();
    EventUtil.addHandler(window,'load',function(){
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel= "stylesheet";
     if(/msie ([^;] )/.test(ua) || "ActiveXObject" in window) {
      // IE 浏览器
      EventUtil.addHandler(link,'readystatechange',function(event){
       event = EventUtil.getEvent(event);
       var target = EventUtil.getTarget(event);
       if (target.readyState == "loaded" || target.readyState == "complete"){
       EventUtil.removeHandler(target, "readystatechange", arguments. callee);
        alert("css已经加载完成");
       }
      });
     }else {
      // 除IE之外的标准浏览器
      EventUtil.addHandler(link,'load',function(event){
       alert("css已经加载完成");
      });
     }
     link.href = "style.css";
     document.getElementsByTagName("head")[0].appendChild(link);
    });
    

    另一种概念样式的诀要是应用<style>成分来含有嵌入式的css

    正如所示代码:

    <style>

    body {background-color:red;}

    </style>

    依据同样的法则,上面包车型地铁代码除了IE8及以下不帮助,别的浏览器下都辅助;如下代码:

    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode("body{background-color:red}"));
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
    

    故而大家也能够像JS一样包裹一个全包容的css样式;如下代码所示:

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

    为了更有益于调用,由此大家也足以打包贰个函数来;如下代码:

    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);
    }
    // 调用方式如下:
    loadStyleString("body{background-color:red}");
    

    DOM的扩展

    1. querySelector()方法

    querySelector()方法接收贰个css选用符,再次回到与该情势相称的首先个因素,借使未有找到相称成分,则赶回null;如下代码:

    复制代码 代码如下:

    <div id="test">test</div>
    <div class="cls">1111</div>
    <div class="cls">2222</div>
    <div class="cls">2222</div>

    JS代码如下:

    // 取得body
    var body = document.querySelector('body');
    console.log(body); // body的引用
    // 取得id为test的元素
    var test = document.querySelector("#test");
    console.log(test); // <div id="test">test</div>
    // 取得类为cls的第一个元素
    var cls = document.querySelector(".cls");
    console.log(cls); // <div class="cls">1111</div>
    

    同理我们也足以透过Element类型调用querySelector()方法时,只会在该因素后代范围内找出匹配的要素,如下代码:

    复制代码 代码如下:

    <div class="testParent">
    <p>1111</p>
    <p>2222</p>
    </div>

    自身想通过先得到div中的testParent,然后再拿走p成分(通过querySelector方法);如下代码:

    var testParent = document.querySelector('.testParent');
    var pfirst = testParent.querySelector("p");
    console.log(pfirst); // <p>1111</p>
    

    浏览器支持程度:IE8 ,firefox,chrome,safari3.1 ,opera10

    2. querySelectorAll()方法

    querySelectorAll()方法接收的参数与querySelector()方法同样,都是一个css选拔符,不过回去的是享有相称的要素,这一个点子重回的是一个NodeList的实例。

    一般来讲代码演示:

    <div id="test">
     <em class="selected">11111</em>
     <em class="selected">22222</em>
     <em>33333</em>
     <em>44444</em>
    </div>
    

    JS代码如下:

    // 取得div中所有em元素
    var em = document.getElementById("test").querySelectorAll('em');
    console.log(em); // NodeList
    console.log(em.length); // 4
    
    // 第二种方式 也可以先使用querySelector
    var test = document.querySelector("#test");
    var em2 = test.querySelectorAll('em');
    console.log(em2); // NodeList
    console.log(em2.length); // 4
    
    // 取得类为selected的所有元素
    var selected = document.querySelectorAll('.selected');
    console.log(selected); // <em class="selected">11111</em>
        // <em class="selected">22222</em>
    // 也可以通过以下的方式获得所有的em元素
    var em = document.querySelectorAll('div em');
    console.log(em); // NodeList
    console.log(em.length); // 4
    

    要拿走重返的NodeList中的每一个因素,能够采取item()方法,也能够运用方括号的语法;

    var ems = document.querySelectorAll('#test em');
    for(var i = 0, ilen = ems.length; i < ilen; i  ) {
     console.log(ems[i]); // 取得每一项em
     console.log(ems.item(i)); // 取得每一项em
    }
    

    浏览器协助程度:IE8 ,firefox,chrome,safari3.1 ,opera10

    3. matchesSelector()方法

    以此办法接收贰个参数,即css选用符,假设调用成分与该选拔符相配,重临true,不然,再次来到false;

    正如代码:

    console.log(document.body.webkitMatchesSelector("body")); // true

    IE9 通过msMatchesSelector()协理该办法,Firefox3.6 通过mozMatchesSelector()扶助该措施;safari5 和chrome通过webkitMatchesSelector()辅助该格局;因而大家能够打包三个函数,如下代码:

    function matchesSelector(element,selector) {
    if(element.MatchesSelector) {
     return element.MatchesSelector(selector);
    }else if(element.msMatchesSelector) {
     return element.msMatchesSelector(selector);
    }else if(element.webkitMatchesSelector) {
     return element.webkitMatchesSelector(selector);
    }else if(element.mozMatchesSelector) {
     return element.mozMatchesSelector(selector);
    }else {
      throw new Error("Not supported");
     }
    }
    console.log(matchesSelector(document.body,'body')); // true
    var test = document.querySelector('#test');
    console.log(matchesSelector(test,'#test')); // true
    

    4. getElementsByClassName() 方法

    该方法接收叁个参数,即包括二个仍然两个类名的字符串,重回带有钦定类的全数因素的NodeList;传入多个类名时,类名的先后顺序不根本。

    复制代码 代码如下:

    <p class="p1">111</p>
    <p class="p1">222</p>
    <p class="p1">333</p>

    console.log(document.getElementsByClassName("p1")); // 返回NodeList

    帮忙getElementsByClassName()方法的浏览器有IE9 ,firefox3 ,safari3.1 ,chrome和opera9.5 ;

    5. classList属性

    正如代码:

    <div class="aa bb cc" id="div">aaa</div>

    自个儿想删除aa那几个类名的时候,在此以前须要如下写代码:

    var div = document.getElementById("div");
    // 首先,取得类名字符串并拆分成数组
    var classNames = div.className.split(/s /);
    var pos = -1,
      i, 
     len;
    for(i = 0,len = classNames.length; i < len; i =1) {
     if(classNames[i] == 'aa') {
      pos = i;
      break;
     }
    }
    // 删除类名
    classNames.splice(i,1);
    // 把剩下的类名拼成字符串并重新设置
    div.className = classNames.join(" "); 
    // <div class="bb cc" id="div">aaa</div>
    

    只是未来HTML5猛增了一种操作类名的不二等秘书诀,可以让操作更简短也更有利于,那正是负有因素增多classList属性。那些classList属性是新集结类型DOMTokenList的实例;DOMTokenList有一个意味友好带有多少成分的length属性,而要取得每种成分得以采纳item()方法,也能够使用中括号;

    再有以下方法:

    add(value):将加以的字符串值加多到列表中。倘诺值已经存在,就不增加了。
    contains(value):表示列表中是还是不是留存给定的值,假使存在则赶回true,不然再次来到false。
    remove(value):从列表中去除给定的字符串。
    toggle(value):假使列表中曾经存在给定的值,删除它;如果列表中绝非给定的值,增添它。
    明日大家得以来看看使用方面包车型地铁法门的长处如下,我们得以来做个demo,代码如下:

    <div class="aa bb cc" id="div">aaa</div>

    JS如下:

    var div = document.getElementById("div");
    // 删除类名aa,如下方法即可
    div.classList.remove("aa");
    // html结构如下: <div class="bb cc" id="div">aaa</div>
    // 添加类名current,如下方法即可
    div.classList.add("current");
    // html结构变为如下 <div class="bb cc current" id="div">aaa</div>
    
    // 切换aa类名
    div.classList.toggle("aa");
    // html结构变为如下 <div class="aa bb cc current" id="div">aaa</div>
    // 确定元素是否包含类名;
    console.log(div.classList.contains("aa")); // true
    

    支撑classList属性的浏览器有IE10 ,firefox3.6 和chrome

    HTML5新扩展自定义数据属性

    HTML5中鲜明可感到因素增添非规范的习性,但要增加前缀data-,例如如下代码:

    <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

    增多了自定义属性之后,能够由此成分的dataset属性来访问自定义属性的值,dataset属性的值是DOMStringMap的一个实例,也等于三个名值对的炫酷;比方如下代码:

    //本例中使用的方法仅用于演示
    var div = document.getElementById("myDiv");
    console.log(div.dataset); // DOMStringMap {value: "12345", name: "Nicholas"}
    //取得自定义属性的值
    var value1 = div.dataset.value;
    console.log(value1); // 12345
    var name1 = div.dataset.name;
    console.log(name1); // Nicholas
    //设置值
    div.dataset.value = 23456;
    div.dataset.name = "Michael";
    //有没有"myname"值呢?
    if (div.dataset.name){
     console.log("Hello, "   div.dataset.name); // Hello, Michael
    }
    

    新葡亰496net 9

    浏览器帮助的水准有;firefox6 和chrome浏览器;

    你大概感兴趣的稿子:

    • 整治JavaScript对DOM中各种类型的要素的常用操作
    • JavaScript利用HTML DOM实行理文件书档案操作的方法
    • JavaScript操作HTML DOM节点的基础教程
    • JavaScript对HTML DOM使用伊芙ntListener进行操作
    • 详解JavaScript操作HTML DOM的中坚方式
    • JavaScript DOM操作表格及体制
    • js使用DOM操作完结简单留言板的方法
    • JavaScript操作DOM元素的childNodes和children区别
    • javascript中HTMLDOM操作详解
    • JavaScript基础语法、dom操作树及document对象
    • JS操作iframe里的dom(实例讲授)
    • 浅析JS操作DOM的一些常用方法

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:Element节点类型详解,你所不领会的

    关键词:

上一篇:没有了

下一篇:没有了