zoukankan      html  css  js  c++  java
  • 原生JS和jQuery中基本的节点操作


    js中节点操作
    **document.createElement()**
    用来生成网页元素节点,参数为元素的标签名;

    **document.createTextNode()**
    用来生成文本节点,参数为所要生成的文本节点的内容;

    **node.appendChild()**
    接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点;

    **node.hasChildNodes()**
    返回一个布尔值,表示当前节点是否有子节点

    **node.removeChild()**
    接受一个子节点作为参数,用于从当前节点移除该子节点

    **node.cloneNode()**
    用于克隆一个选中的节点。
    它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。
    **注意:** 不会克隆绑定到该元素上的事件;

    **node.innerHTML**
    返回该元素包含的 HTML 代码。该属性可读写,常用来设置某个节点的内容;(不属于W3C DOM规范)

    **node.innerText**

    返回该元素包含的内容。该属性可读写

    **node.nextElementSibling**
    返回紧跟在当前节点后面的第一个同级Element节点,如果当前节点后面没有同级节点,则返回null;

    **node.previousElementSibling**
    返回紧跟在当前节点前面的第一个同级Element节点,如果当前节点前面没有同级节点,则返回null;

    **node.parentElement**
    返回当前节点的父级Element节点;

    **node.childNodes**
    返回一个NodeList集合,成员包括当前节点的所有子节点(注意空格回车也算)。

    **node.firstChild**

    返回树中节点的第一个子节点,如果节点是无子节点,则返回 `null。`

    **node.lastChild**

    返回该节点的最后一个子节点,如果该节点没有子节点则返回`null`。

    属性操作
    **node.getAttribute()**
    返回当前元素节点的指定属性。如果指定属性不存在,则返回null;

    **node.setAttribute()**
    为当前元素节点新增属性。如果同名属性已存在
    **node.hasAttribute()**
    返回一个布尔值,表示当前元素节点是否包含指定属性

    **node.removeAttribute()**
    从当前元素节点移除属性


    jq中节点操作

     创建节点 $('<div></div'> 创建一个div标签


     添加节点

    append appendTo 在被选元素的结尾插入内容 父.append(子) 子.appendTo(父)
    prepend prependTo 在被选元素的开头插入内容 父.prepend(子) 子.prependTo(父)
    before insertBefore 在被选元素之后插入内容 后.before(前) 前.insertBefor(后)
    after insertAfter 在被选元素之前插入内容 前.after(后) 后.insertAfter(前)

    ```

     清空节点与删除节点
    empty:清空指定节点的所有元素,自身保留(清理门户)
    remove:相比于empty,自身也删除(自杀)


     克隆节点

    - 作用:复制匹配的元素
     复制$(selector)所匹配到的元素(深度复制)
    cloneNode(true) //原生js cloneNode 不传参数 克隆标签本身,传参数true 克隆标签本身以及内容
    返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
    $(selector).clone();//克隆元素本身及后代
    $(selector).clone(true);//克隆元素本身及后代以及绑定的事件

  • 相关阅读:
    Fedora 8 三维特效美化全攻略
    用C++编写简单绘图语言的语法分析器
    linux tar 的使用
    jquery基础
    hibernate4中主要的配置文件配置
    在对List集合进行remove()等操作重写equals()和hashCode()方法的必要性
    jquery基础2
    javascript时间格式化
    linux之shell编程shell基础
    html会移动的文字
  • 原文地址:https://www.cnblogs.com/ruoruchujian/p/10923951.html
Copyright © 2011-2022 走看看