一种与浏览器，平台，语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。
DOM Core：DOM Core 并不专属于 JavaScript，任何一种支持 DOM 的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，例如：XML。
HTML DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时，有许多专属于HTML-DOM的属性。
CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM 主要用于获取和设置 style 对象的各种属性。
1.查找节点
请见上面的“基本选择器”。
2.创建节点
使用JQuery的工厂函数，创建一个新节点：var $newNode = $(“
你好
”);，然后将新节点插入到指定元素节点处。
3.插入节点
将新创建的节点，或获取的节点插入指定的位置。
“$node.append($newNode)”，向每个匹配的元素内部的结尾处追加结尾处。如，“$("p").append("Hello");”将"Hello"添加到"p"内部的结尾处。
“$newNode.appendTo($node)”，将新元素追加到每个匹配元素内部的结尾处。
“$node.prepend($newNode)”，向每个匹配的元素内部的结尾处追加开始处。如，“$("p").prepend("Hello");”将"Hello"添加到"p"内部的起始处。
“$newNode.prependTo($node)”， 将新元素追加到每个匹配元素内部的开始处。
“$node.after($newNode)”，向每个匹配的元素的之后插入内容，是并列兄弟。如，“$("p").after("Hello");”将"Hello"插入到"p"的后边。它们是兄弟关系。
“$newNode.insertAfter($node)”，将新元素插入到每个匹配元素之后。
“$newNode.before($node)”，向每个匹配的元素的之前插入内容。如，“$("p").before("Hello");”将"Hello"插入到"p"的前面，它们是兄弟关系。
“$node.insertBefore($newNode)”，将新元素插入到每个匹配元素之前。
注意：如果插入的节点是不是新创建的，插入将变成移动操作。所以，在插入这样的节点之前应该使用clone的节点。
4.删除节点
从DOM中删除所有匹配的元素。如，“$("p").remove(".hello");”删除所为class属性值为hello的p元素，还有它下面的所有元素。
从DOM中清除所有匹配的元素。如，“$("p").empty();”清除所有p元素，还有它下面的所有元素。
5.复制节点
克隆匹配的DOM元素。如，“$("p").clone();”返回克隆后的副本，但不具有任何行为。如果要将DOM的事件一起克隆，应该使用“$("p").clone(true);”。
6.替换节点
将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如，$("p").replaceWith("Paragraph. ");，将所有p元素，替换为"Paragraph. "。
与replaceWith相返：$("Paragraph. ").replaceAll("p");。
7.包裹节点
wrap()：将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用， 而且不会破坏原始文档的语义。如，“$("p").wrap("
");”。每个p元素被包裹到wrapAll()：将所有匹配的元素用一个元素来包裹。而wrap()方法是将所有的元素进行单独包裹。如，“$("p").wrapAll("
");”，将所有p元素包裹到wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如，“$("p").wrapInner("");”， 被每一个p元素包裹。
8.属性设置
attr()：获取属性和设置属性。
当为该方法传递一个参数时，即为某元素的获取指定属性。如，“$("img").attr("src");”，获取img元素的src属性值。
当为该方法传递两个参数时，即为某元素设置指定属性的值。如，“$("img").attr("src","test.jpg");”，设置img元素的src属性值为test.jsp。
jQuery 中有很多方法都是一个函数实现获取和设置。如：attr()，html()，text()，val()，height()，width()，css()等。
removeAttr()：删除指定元素的指定属性。
9.样式操作
可以通过“attr()”设置或获取css样式。
追加样式：addClass() 。如，“$("p").addClass("selected");”，向所有P元素中追加“selected”样式。
移除样式：removeClass() --- 从匹配的元素中删除全部或指定的class。如，“$("p").removeClass("selected");”，删除所有P元素中的“selected”。
切换样式：toggleClass() --- 控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。如，“$("p").toggleClass("selected");”，所有的P元素中，如果存在“selected”样式就删除“selected”样式，否则就添加“selected”样式。
判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个 class，有返回 true； 否则返回 false。如，“$(this).hasClass("protected")”，判断当前节点是否有“protected”样式。
10.设置或获取HTML、文本和值
读取和设置某个元素中的 HTML 内容： html()，该方法可以用于 XHTML，但不能用于 XML 文档。
读取和设置某个元素中的文本内容：text()，该方法既可以用于 XHTML 也可以用于 XML 文档。
读取和设置某个元素中的值：val()，该方法类似 JavaScript 中的 value 属性。对于文本框，下拉列表框，单选框该方法可返回元素的值(多选框只能返回第一个值)。如果为多选下拉列表框，则返回一个包含所有选择值的数组。
11.常用遍历节点的方法
取得匹配元素的所有子元素组成的集合：children()。该方法只考虑第一层子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的兄弟元素的集合(但集合中只有一个元素)：next()。
取得匹配元素前面紧邻的兄弟元素的集合(但集合中只有一个元素)：prev()。
取得匹配元素前后所有的兄弟元素: siblings()。
12.CSS-DOM操作
获取和设置元素的样式属性：css()。
获取和设置元素透明度：opacity()属性。
获取和设置元素高度，宽度：height()，width()。在设置值时，若只传递数字，则默认单位是px。如需要使用其他单位则需传递一个字符串，例如 “$(“p:first”).height(“2em”)”；
获取元素在当前视窗中的相对位移：offset()。它返回的对象包含了两个属性：top，left。该方法只对可见元素有效。
以上是JQuery基础课程：JQuery中的DOM操作介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AMJavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。
JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PMJavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari
Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AMPython和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。
Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。
Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AMPython和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。
JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AMjavascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。
JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AMJavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。
Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
SublimeText3汉化版
中文版，非常好用
Dreamweaver Mac版
视觉化网页开发工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
