and*_*ick 10 javascript jquery dom
试图找出jQuery的之间的区别时,我导致了这个问题.get()并且.index(),我看过了jQuery的API,我仍然没有得到区别它们之间有什么,也许我不理解的术语？
jQuery对象和DOM元素之间有什么区别？DOM元素和DOM节点是一回事吗？他们只是<div>和<a>等是DOM节点/ DOM元素只是一个HTML标签？
编辑:并不是DOM只是页面的结构？<html><body>etc.</body></html>？
dec*_*eze 15
HTML!= DOM!= Javascript!= jQuery,但它们都是密切相关的.
浏览器从Web服务器接收HTML文档,该文档只是文本.浏览器继续将此文本解析为一个内部结构,它实际上可以用来直观地呈现页面.DOM表示浏览器具有HTML文档的内部结构.可以使用Javascript(或其他方法)来操纵该DOM,从而改变页面的可视化渲染.DOM节点和DOM元素只是同一个事物的两个名称.DOM元素表示页面上的可视或功能元素,该元素是从原始HTML文档创建的.
jQuery现在是一个Javascript库,通过提供一些便利捷径,使得操作DOM比使用纯Javascript更容易.jQuery对象是一个Javascript对象,它可能与DOM有关,也可能没有(通常是这样).jQuery对象是Javascript中DOM元素的便利包装器,它是一种操作DOM的方法,DOM是从HTML文件创建的页面的表示.
希望有所帮助.:O)
Ric*_*gan 13
当我开始使用jQuery时,我喜欢看它的一种方式是这样的(是的,我知道一切都不完全正确,但它们起到了松散的类比):
DOM元素是HTML文档中通常使用vanilla Javascript获取的节点.类似的东西var foo = document.getElementById('bar')会让你成为一个原始的DOM元素.
jQuery包装器对象(对于jQuery开发的很大一部分)基本上是一个包含DOM元素的全新对象.而这基本上就是一个容器.这就是你得到的类似东西$('#bar'),你也可以通过像DOM这样的DOM元素来获取$(foo).这些实现了DOM对象上的各种jQuery功能 - 如果它们是普通的DOM对象,它们通常不具备这些功能.
在此基础上,.get()和之间的区别.index()非常简单.
.get(n)返回nthjQuery包装器对象中的DOM元素.类似的东西$('input').get(0)会给你<input>DOM中的第一个元素,就好像你调用document.getElementById()它(或类似的东西)..eq(n)做类似的事情,但返回一个包含DOM元素的jQuery包装器对象.
.index()只是给出了jQuery包装器对象中特定元素的位置.这很像你期望它们在数组和其他集合中工作的方式.
Jam*_*ice 10
该get方法用于访问jQuery对象中的DOM元素:
var allDivs = $("div").get();
在该示例中,allDivs将是包含所有匹配元素的数组(在这种情况下,它将包含divDOM中的每个元素).
该index方法返回一个整数,该整数告诉您所选元素相对于其兄弟的位置.请考虑以下HTML:
<ul>
<li>1</li>
<li id="second">2</li>
<li>3</li>
</ul>
以下是jQuery:
console.log($("#second").index()) //Prints "1"
至于你的另一个问题,DOM节点几乎是DOM中的任何东西.元素是节点的类型(类型1).例如,您还有文本节点(类型3).元素几乎都是任何标记.
为了更清楚,请考虑以下HTML:
<div id="example">
Some text
<div>Another div</div>
<!--A comment-->
</div>
以下JS:
var div = $("#example").get(0);
for(var i = 0; i < div.childNodes.length; i++) {
console.log(div.childNodes[i].nodeType);
}
那将打印出来:
3 - Text node ("Some text")
1 - Element node (div)
3 - Text node ("Another div")
8 - Comment node (<!-- -->)
3 - Text node ("A comment")
您可以在此处找到节点类型列表.有关DOM实际内容的精彩介绍,请参阅此MDN文章