HTML DOM的增删改查总结（查找）

ct_htmltree.gif

查找 HTML 元素

1. 原生js

通过 id 查找 HTML 元素

document.getElementById(id)

通过标签名找到 HTML 元素

document.getElementsByTagName(tagName)

通过类名找到 HTML 元素

document.getElementsByClassName(className)

通过 HTML5 querySelector API查找元素

element = document.querySelector(selectors)

• element是一个Element对象
• selectors是一个包含一个或多个由逗号分隔的CSS选择器的字符串

elementList = document.querySelectorAll(selectors)

• elementList 是一个静态的 NodeList 类型的对象
• selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串

2. jQuery

核心API

• jQuery()返回匹配的元素集合，无论是通过在DOM的基础上传递的参数还是创建一个HTML字符串。
  jQuery( selector [, context ] )

  jQuery( selector [, context ] )
  jQuery( element )
  jQuery( elementArray )
  jQuery( object )
  jQuery( jQuery object )
  jQuery()
  

  jQuery( html [, ownerDocument ] )

  jQuery( html [, ownerDocument ] )
  jQuery( html, attributes )
  

  jQuery( callback )

  jQuery( callback )
  

向上遍历 DOM 树

• .parent([selector])
  如果提供的jQuery代表了一组DOM元素，.parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象
  亲自试一试
• .parents([selector])
  如果提供的jQuery代表了一组DOM元素，.parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;返回的元素秩序是从离他们最近的父级元素开始的（注：从里到外的顺序）。当多个DOM元素在原有集合中，返回的集合将是原来元素以相反的顺序排序， 并且重复删除。
  亲自试一试
• .parentsUntil( [selector ] [, filter ] )
  如果提供一个jQuery对象代表DOM元素集合， .parentsUntil() 方法会找遍所有这些元素的前辈元素，直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素，除了与 .parentsUntil() 选择器匹配的那个元素。如果提供的选择器没有匹配到任何元素，或者没有提供选择器，那么所有的祖先元素都会被选中。其效果与没有提供参数的.parents()方法是一样的
  亲自试一试

向下遍历 DOM 树

• .children( [selector ] )
  鉴于一个jQuery对象，表示一个DOM元素的集合，.children()方法允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象。.find() 和.children()方法是相似的，但后者只是针对向下一个级别的DOM树。还要注意的是和大多数的jQuery方法一样，.children()不返回文本节点;让所有子元素包括使用文字和注释节点，建议使用.contents()。
  亲自试一试
• .find( selector )
  如果一个jQuery对象表示一个DOM元素的集合， .find()方法允许我们能够通过查找DOM树中的这些元素的后代元素，匹配的元素将构造一个新的jQuery对象。.find()和.children()方法是相似的，但后者只是再DOM树中向下遍历一个层级（注：就是只查找子元素，而不是后代元素）。
  .find()方法还可以接受一个选择器表达式，该选择器表达式可以是任何可传给$()函数的选择器表达式。如果紧随兄弟匹配选择器，它将被保留在新构建的jQuery对象中；否则，它被排除在外。
  亲自试一试

在 DOM 树中水平遍历

• .siblings( [selector ] )
  如果提供的jQuery代表了一组DOM元素，.siblings()方法通过这些元素组合传递到方法构造一个新的jQuery对象。
  该方法选择性地接受同一类型选择器表达式，我们可以传递给$()函数。如果提供了选择器表达式，那么会先测试该元素是否满足匹配的选择器表达式。
  亲自试一试
• .next( [selector ] )
  如果一个jQuery代表了一组DOM元素， .next()方法允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。
  该方法还可以接受一个可选的选择器表达式，该选择器表达式可以是任何可传给 $() 函数的选择器表达式。如果每个元素的直接兄弟元素满足所提供的选择器，那么它会保存在新生成的 jQuery 对象中，否则，不会包含该元素。
  亲自试一试
• .nextAll( [selector ] )
  如果一个jQuery对象代表了一组DOM元素，.nextAll()方法允许我们在DOM树上遍历所有元素的后继元素，并且构建一个新的匹配元素的jQuery对象。
  该方法还可以接受一个可选的选择器表达式，该选择器表达式可以是任何可传给 $() 函数的选择器表达式。如果供应选择器参数，那么会先测试该元素是否满足匹配的选择器表达式。
  亲自试一试
• .nextUntil( [selector ] [, filter ] )
  如果提供一个选择器表达式代表DOM元素集合，.nextUntil() 方法会查找这些元素所在的DOM树中跟在它们后面的元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。新返回的 jQuery 对象里包含了后面所有找到的兄弟元素，但不包括那个选择器匹配到的元素。
  如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。
  亲自试一试
• prev(), prevAll() & prevUntil()方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

3. Vue

• ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

  
  hello
  
  
  
  

  当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
  关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 -
  它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

4. React

• Refs
  React支持一个可以附加到任何组件的特殊属性ref。ref属性可以是一个字符串或一个回调函数。当ref属性是一个回调函数时，函数接收底层DOM元素或类实例（取决于元素的类型）作为参数。这使你可以直接访问DOM元素或组件实例。

  不要过度使用 Refs。如果你发现自己经常在应用程序中使用refs来“搞事情”，请考虑使用状态提升。

• findDOMNode()

  ReactDOM.findDOMNode(component)
  

  如果这个组件已经被挂载到DOM中，函数会返回对应的浏览器中生成的DOM元素 。你需要从DOM中读取值时，比如表单的值，或者计算DOM元素的尺寸，这个函数会非常有用。大多数情况下，你可以添加一个指向DOM节点的引用，从而完全避免使用findDOMNode 这个函数. 当 render 返回 null 或者 false 时, findDOMNode 也返回 null.