zoukankan      html  css  js  c++  java
  • Element类型

    除了document,element类型也算是最常用的类型

    Element节点有以下特征:

    nodeType  值为1

    nodeName  元素的标签名

    nodeValue  值为null

    parentNode  值为Document或Element(上一级父级元素)

    首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素节点,class是属性节点,head是文本节点,在这里你可以说h2这个元素节点包含一个属性节点和一个文本节点。其实几乎所有HTML的标签都是元素节点,而id, title, class等则是属性节点,而元素所包含的文本内容则是文本节点。

    tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用。

    而tagName只有在元素节点上才会有值。

    从DOM层次来看,nodeName是node 接口上的property,而tagName是element 接口上的property,所有的节点(元素节点,属性节点,文本节点等12种)都继承了node接口,而只有元素节点才继承了element节点,因此nodeName比tagName具有更大的使用范围

    总结:tagName只能用在元素节点上,而nodeName可以用在任何节点上,可以说nodeName涵盖了tagName,并且具有更多的功能,因此建议总是使用nodeName。

    转自:https://blog.csdn.net/borishuai/article/details/5719227

     1、HTML元素

    HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过他的子类型来表示。

    HTMLElement类型直接继承自Element并添加了一些属性。添加属性分别对应每个HTML元素中都存在下列标准特性。

    id,元素在文档中的唯一标识符。

    title,有关元素的附加说明信息,一般通过工具提示条显示出来,(也就是把鼠标放在元素上边显示的提示信息)

    lang,元素内容的元素代码,很少使用。

    dir,语言的方向,值为‘ltr’,(left-to-right,从左至右)或‘rtl’(right-to-left,从右至左),也很少使用

    className,与元素的class特性对应,即为元素指定的CSS类,

    2、取得特性

    每一个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。

    操作DOM方法的方法有三个,这个方法可以针对特性使用:

    对象.getAttribute(‘属性’)  //传入的字符串要和属性名相同class不能写为className,如果不存在则返回null

    还可以获取元素的自定义属性,特性的名称是不区分大小写的

    style属性返回一个CSS对象

    onclick特性必须接受一个函数的指针,否则返回null

    由于getAttribute()函数在每一个浏览器返回的属性值不一致,所以不经常使用。

    /*

     特殊情况:

    <body>
        <div id='div1' title='klkx' dir='rtl' class='mn'  align='center'>abc</div>
        <script>
            var oDiv = document.getElementById('div1');
            /*
                oDiv.btn = 'mn';
                console.log( oDiv.getAttribute( 'btn') ); //null
            */
            oDiv.setAttribute('btn','mn');//变为对象的特性
            
            console.log( oDiv.getAttribute( 'btn') );    // mn
            
        </script>
     </body>

    但是IE除外,如果是.设置的属性,利用对象.属性的形式能访问当,但是用getAttribute()访问不到,用setAttribute()设置的特性,用对象.属性也访问不到,一个是特性,一个是属性;并不一样

    */

    3、设置特性

    修改的对象.setAttribute(‘属性’,'要修改的值')

    如果特性不存在,则会创建该特性并赋值

    删除特性:

    修改的对象.removeAttribute('属性')  //会删除属性和属性值

    4、attributes属性

    Element类型是使用attributes属性的的唯一一个DOM节点类型。

    attributes属性包含一个NamedNodeMap与NodeList类似,动态类数组;

    元素的每一个特性都保存在Attributes节点表示,每一个节点都保存在NamedNodeMap对象中

    NamedNodeMap对象有以下方法:

    getNamedItem(name);返回nodename属性等于name的节点

    removeNamedItem(name);从列表中删除nodeName属性等于name的节点,返回删除的节点

    setNamedItem(node);向列表中添加节点,以节点的nodeName属性为索引

    setNamedItem() 方法向 nodeMap 添加指定的节点。并不常用因为还要创建一个新的节点

    如果此节点已存在,则将替换该节点,并返回被替换的节点,否则返回值是 null。

    <body>
        <div id='div1' title='klkx' dir='rtl' class='mn'  align='center' name='abc'>abc</div>
        <script>
            var oDiv = document.getElementsByTagName('div')[0];
            console.log(oDiv.align);
            var s1 = oDiv.attributes.removeNamedItem('align');//删除节点
            console.log(oDiv.align);
            var align = document.createAttribute('align');//要插入节点,必须先创建节点
            align.nodeValue = 'center';
            var s2 = oDiv.attributes.setNamedItem(align);
            console.log(s2);
        </script>
     </body>

    item(pos)返回位于数字pos位置的节点

    三种方法:结果是一样的

    console.log( oDiv.attributes.item('3').nodeValue );
    console.log( oDiv.attributes['class'].nodeValue );
    console.log( oDiv.attributes.getNamedItem('class').nodeValue );

     也可以用以上的语法设置特性的值:

         oDiv.attributes.item('3').nodeValue = 'mn1'
            console.log( oDiv.attributes.item('3').nodeValue );
    oDiv.attributes[
    'class'].nodeValue = 'mn2' console.log( oDiv.attributes['class'].nodeValue );
    oDiv.attributes.getNamedItem(
    'class').nodeValue = 'mn3'; console.log( oDiv.attributes.getNamedItem('class').nodeValue );

    removeNamedItem()方法与removeAttribute()方法相同,都删除节点,但是前者返回删除的节点

    由于attributes对象的方法不够方便,所以经常使用

    getAttribute()

    removeAttribute()

    setAttribute()

    实例:遍历整个对象的特性,并返回以空格拼接的字符串

    function outputAttributes(element){
                var pairs = [],
                attrName,
                attrValue,
                i,
                len;
                for (i=0,len=element.attributes.length;i<len ;i++ )
                {
                    attrName = element.attributes[i].nodeName;
                    attrValue = element.attributes[i].nodeValue;
                    pairs.push(attrName + '="' + attrValue + '"');
                }
                return pairs.join(' ');
            }

    问题:不同的浏览器返回的特性的顺序并不一样;

    IE7以下会返回更多可能的特性;

    所以为了兼容以前的版本,可以每一个特性都有一个specified属性

    specified属性:

    specified 属性返回 true,如果已规定某个属性。

    如果已创建该属性但尚未添加到元素中,也会返回 true。

    否则返回 false。

    function outputAttributes(element){
                var pairs = [],
                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){
                        pairs.push(attrName + '="' + attrValue + '"');
                    }
                }
                return pairs.join(' ');
            }

     5、创建元素

    1、document.create('div');

    2、document.create('<div id="div1"></div>');

    IE7以下创建元素用第2种

    6、元素的子节点

    元素可以有任意多个子节点和后代节点,因为元素可以使其他元素的子节点。

    元素的childNodes属性包含了所有的自己点,包括文本节点、注释、处理指令。不同浏览器看待节点方面存在显著不同

    实例:这是一个通用的方法:

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            var oUl = document.getElementsByTagName('ul')[0],
                i,
                len,
                index = 0;
            for (i=0,len = oUl.childNodes.length;i<len ;i++ )
            {
                if (oUl.childNodes[i].nodeType === 1)
                {
                    index++;
                }
            }
            console.log(index);
        </script>
     </body>

    也可以通过:

    父节点.getElementByTagName('标签名');获得

  • 相关阅读:
    Account group in ERP and its mapping relationship with CRM partner group
    错误消息Number not in interval XXX when downloading
    错误消息Form of address 0001 not designated for organization
    Algorithm类介绍(core)
    梯度下降与随机梯度下降
    反思
    绘图: matplotlib核心剖析
    ORB
    SIFT
    Harris角点
  • 原文地址:https://www.cnblogs.com/jokes/p/9468174.html
Copyright © 2011-2022 走看看