HTML DOM的增删改查总结（查找）
2018-02-09 本文已影响0人
梦里花花不语
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)
elementList = document.querySelectorAll(selectors)
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 )
向上遍历 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 元素；如果用在子组件上，引用就指向组件实例：<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp instance --> <child-comp ref="child"></child-comp>当
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.
