zoukankan      html  css  js  c++  java
  • JS中的DOM操作

    一、DOM的创建

    DOM节点(Node)通常对应于一个标签、一个文本、或者一个HTML属性。DOM节点有一个noteType属性用来表示当前元素的类型,它是一个整数:

       1. Element, 元素

       2. Attribite, 属性

       3. Text,文本

    DOM节点创建最常用的便是document.createElement和document.createTextNode方法:

        var node1 = document.createElement('div');

        var node2 = document.createTextNode("Hello World!");

     二、DOM查询

    //返回当前文档中第一个类名为"myclass“的元素

    val el = document.querySelector(".myclass");

    //返回一个文档中所有的class为"note"或者“alert”的div元素

     val els = document.querySelectorAll("div.note,div.alert");

    //获取元素

    val el = document.getElementById('XXX'); 

    val els = document.getElementsByClassName('highlight');

    val els = document.getElementsByTagName('td');

    //获取父元素、父节点

    var parent = ele.parentElement;

    var parent = ele.parentNode;

    var offsetParent= ele.offsetParent; //只读,没有兼容性问题

    //获取子节点,子节点可以是任何一种节点,可以通过noteType来判断

    var nodes = ele.children;

    var nodes = ele.childNodes;

    //获取元素属性列表

     var attr = ele.attributes;

    // 查询子元素

    var els = ele.getElementsByTagName('td');

    var els = ele.getElementsByClassName('highlight');

    // 当前元素的第一个/最后一个子元素节点

    val el = ele.firstChild; 

    val el = ele.lastChild; 

    val el = ele.firstElementChild; 

    val el = ele.lastElementChild;

      // 下一个/上一个兄弟元素节点

    var el = ele.nextSibling; var el = ele.previousSibling; var el = ele.nextElementSibling; var el = ele.previousElementSibling;

    三、DOM更改

    // 添加、删除子元素
    ele.appendChild(el);
    ele.removeChild(el);
    
    // 替换子元素
    ele.replaceChild(el1, el2);
    
    // 插入子元素
    parentElement.insertBefore(newElement, referenceElement);
    
    //克隆元素
    ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点

    四、属性操作

    //获取一个{name, value}的数组

    var attrs = el.attributes;

    // 获取、设置属性

    var c= el.getAttribute('class');

    //是否有属性设置

    el.hasAttributes();

  • 相关阅读:
    (转)解决AJAX中使用UpdatePanel后再用Response.Write();等无法弹出对话框问题 3法
    ASP.NET AJAX(开发代号Atlas)重要参考资源大收集
    Ajax.NET 和 Atlas 区别
    SqlDataAdapter的几种常用方法
    C# 2.0与泛型
    DataView 使用技巧 [转]
    .net事务
    SQL Server 2005 SQL Server 2000 改进
    Crystal Reports for Visual Studio 2005 学习一(报表绑定方案)
    oracle的substr函数的用法
  • 原文地址:https://www.cnblogs.com/Ellen-study/p/7501537.html
Copyright © 2011-2022 走看看