zoukankan      html  css  js  c++  java
  • DOM基本操作

    1、获取元素

    (1)docuent.getElementById()通过id获取元素

    (2)docuent.getElementsByName()通过name属性获取元素

    (3)docuent.getElementsByTagName()通过标签名获取元素

    2、节点指针

      (1)父找子:

      ①firstChild()获取元素的首个子节点

      father.firstChild()

      ②lastChild()获取元素的最后一个子节点

      father.lastChild()

      (2)子找父:

      parentNode()获取已知节点的父节点

      son.parentNode()

      (3)兄弟节点:

      ①previousSilbing()获取已知节点的前一个兄弟节点

      brother.previousSibling()

      ②nextSibling()获取已知节点的后面一个兄弟节点

      brother.nextSibling()

      (4)childNodes()获取元素的子节点列表,获得的是一个类数组对象

      father.childNodes()

    3、节点操作

      ①创建元素节点

      document.createElement("元素标签")

      ②创建属性节点

      dcument.createAttribute("元素属性")

      ③创建文本节点

      document.creaeTextNode("文本内容")

    4、插入节点

      ①appendChild()向节点的子节点列表的末位追加节点

      father.appendhild(添加的新节点)

      参数:要添加的新节点

      返回值:要插入的元素

      ②insertBefore()在已知子节点前面插入一个新的子节点

      father.insertBefore(new,ref)

      参数:new表示新的子节点,ref表示已知子节点;当第二个参数为null时,会插入到最后面

      返回值:要插入的元素

      ③removeChild()删除指定的节点

      father.removehild(要删除的节点)

      参数:要删除的节点

      返回值:删除的节点

      ④replaceChild()替换节点

      replaceChild(要替换的元素,被替换的元素)

      参数:第一个参数替换后的新节点,第二个参数需要被替换的旧节点

      返回值:替换掉的旧元素

      ⑤cloneNode()复制节点

      cloneNode(bool)

      参数:布尔值,如果是1或true则复制当前节点和子节点;如果是0或false则只复制本身

    5、属性操作

      ①getAttribute()获取属性

      元素节点.getAttribute(属性名)获取节点中指定属性的属性值

      ②setAttribute()创建或改变元素节点属性

      元素节点.setAttribute(属性名,属性值)

      ③removeAttribute()删除属性

      元素节点.removeAttribute(属性名)

  • 相关阅读:
    Leetcode: Increasing Triplet Subsequence
    Snapchat面经(师兄的)
    M面经prepare: Shuffle a deck
    M面经Prepare: Find integer Average of 2 integers.
    M面经Prepare: Positive-Negative partitioning preserving order
    M面经Prepare: Delete Words Starting With One Character
    Lintcode: Subtree
    Leetcode: Reconstruct Itinerary
    Groupon面经:Find paths in a binary tree summing to a target value
    一些小感悟(2014.04版)
  • 原文地址:https://www.cnblogs.com/zjp-/p/9136386.html
Copyright © 2011-2022 走看看