zoukankan      html  css  js  c++  java
  • DOM知识整理

    DOM即文档对象模型 EcmaScript主要的构成就是JS+DOM+BOM。对DOM的操作是很重要的部分,而且不容易理解

    获取DOM元素

    document.getElementById(docID);//以id获取文档内的元素 *注意getElementById方法只能用在document上
     如otherEle.getElementById(docID);//这样是会出错的
    document.getElementsByTagName(tag);//通过TagName获取元素集合(不是数组),如div,span等等
    document.getElementsByClassName(className);//这个是HTML5中扩展的相当有用的方法,通过类名获取元素集合
    node.parentNode //获取父节点
    node.nextSibling //获取同级的下一个节点
    node.previousSibling//获取同级的上一个节点
    node.firstChild //获取第一个子节点
    node.lastChild //获取最后一个子节点
    node.hasChildNodes() //判断当前节点是否有子节点
    node.childNodes //当前节点的所有子节点
    node.children //获取当前节点的除文本节点之外的所有子节点。(区分于node.childNodes)

    类操作(HTML5)

    node.classList//获取元素的类名集合
    node.classList.add(cName)
    node.classList.contains(cName)//判断该元素是否含有传入的类名
    node.classList.remove(cName)
    node.classList.toggle(cName)//if(exist){ remove } else { add }
    node.classList[index];//根据索引获取类名
    node.classList.item(index);//同上

    数据(HTML5)

    HTML5规范中可以给元素添加自定义属性:data-前缀 = "xxxdata"
    例如:<div data-sex="boy" id="DDD"></div>
    var d = document.getElementById("DDD");
    d.dataset;//该元素存储的数据集合
    d.dataset["sex"]或d.dataset.sex;//去掉前缀 data- 即可获取到数据

    操作节点的方法

    pNode.appendChild(newNode) //如果传入的节点已经在文档中已经存在,则将该节点从原来的位置转移到新位置。
    pNode.insertBefore(node)
    pNode.replaceChild(node)
    pNode.removeChild(node)
    node.cloneNode([Boolean]) //默认为true true为深复制,false为浅复制。IE下存在Bug:它会复制绑定到该元素的事件,所以在复制之前可以根据实际情况提前移除事件绑定。
    
    //将NodeList转换为数组的函数
    function nodelistToArray(nodes){
        var array = null;
        try{//非IE
            array=Array.prototype.slice.call(nodes,0);
        }catch(e){//IE
            array = new Array();
            for(var i =0;len = nodes.length;i<len;i++){
                array.push(nodes[i]);
            }
        }
        return array;
    }

    改变元素内容

    ele.innerHTML = "...";//直接改变元素的html。有些文章说这个方法是比插入DOM快,这点是错的。亲测结果是在Chrome下后者比前者快1/5;
  • 相关阅读:
    void型指针转换。
    MSSQL数据库中记录生日与输入的年龄,进行比对
    [转][C#]内置的 DateTime 用法
    Asp.Net 文件操作基类(读取,删除,批量拷贝,删除,写入,获取文件夹大小,文件属性,遍历目录)
    点击Repeater中的按钮,获取Repeater中TextBox中的值
    [转]UrlReWriter 使用经验小结收藏
    C#中实现VB.net中ReDim功能
    在存储过程中循环表中的记录集
    ADO.net取存储过程的返回值以及存储过程中Return和OUTPUT的区别
    部分FCKeditor常用JS函数
  • 原文地址:https://www.cnblogs.com/TiestoRay/p/2716824.html
Copyright © 2011-2022 走看看