JS 基础 —— JS 与 jQuery 操作DOM 对比

青旅半醒 2022-07-16 09:15 179阅读 0赞

对于新手，学的东西多了、杂了，难免混淆，例如PHP 中数据类型数字对应有int与float，而JS 中只有number，故在此记录笔记对比JS 与jQUery操作DOM 的区别。

**一、设置/获取内容**

**JS：**

innerHTML属性

document.getElementById('test').innerHTML='新内容';//内容中可包含标签，标签将以样式显示

**jQuery：**

1、html()：作用同JS 的innerHTML。

$('#test').html("新内容");

2、text()：只能对于文本。（若有标签，标签将原样显示）

$('#test').text("新内容");//内容将设置为：新内容

3、val()：只能对于表单的value。

$('#myInput').val("表单value");

html()、text()、val()拥有回调函数，回调函数形式相同，拥有两个参数：被选元素中当前元素的下标及当前元素的原来值。函数以返回形式设置新值。例：

$('#test').html(function(index,originValue){ //被选元素只有#test一个，所以index为0，当使用eq()等过滤时，index则可不为0；originValue为旧的html()返回值。 return "新内容";//设置新内容 });

**附加：**

若要获取html dom 的字符串，可用原生JS 的outerHTML 属性，对应 jQuery 中也可用 prop()方法获取：

JS：

var eleCode = document.getElementById("eleID").outerHTML;

jQuery ：

var eleCode = $("#eleID").prop("outerHTML");

**特别说明：**

jQuery 获取属性有两个方法，prop()与attr()方法，前者获取的是固有属性（property：固有属性），attr()可获取自定义属性，如：

var value = $("#eleID").attr("data-my-attribute");

回顾下，JS 获取自定义属性（data-\*）的方式：

var value = document.getElementById("eleID").dataset.myAttribute;

自定义属性集合保存在dataset 属性（注意大小写）中的，属性名为去掉data 与短线后以驼峰命名法命名。查看笔记： [http://blog.csdn.net/qq\_19865749/article/details/52494929][http_blog.csdn.net_qq_19865749_article_details_52494929]

**二、添加新节点**

**JS：**

JS中节点的内容单独为文本节点。注意创建元素与添加元素的函数名！

1、创建元素：document.createElement()

2、创建文本节点：document.createTextNode()

3、添加文本节点与子节点：element.appendChild(childNode)

例：

var newNode=document.createElement("p"); var textNode=document.createTextNode("新段落"); newNode.appendChild(textNode); document.getElementById("myDiv").appendChild(newNode);//将新元素节点添加到某个div里面

**jQuery：**

1、append()：在被选元素的后面追加文本或添加节点。例：

$("p").append("包含内联元素，追加的内容");//对于添加字符串或内联元素，则是追加内容 $("p").append("添加的新段落");//对于块元素，则相当于在元素后面添加块元素

2、prepend()：与append()位置相反，在前面加文本或节点。

3、还有与上面两个作用对应相同的一对：after()与before()，用于分别在被选元素前面与后面插入内容（可包含标签）。

说明：上面jQuery 的四个函数都可有多个字符串参数，用于顺序添加该参数的内容。如：

ar txt1="Text."; // 以 HTML 创建新元素 var txt2=$("").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素

**三、删除子节点**

**JS：**

方式一：分别使用getElementById等方法找到需删除的节点与其父节点，然后使用parentElementNode.removeChild(childElementNode)删除节点。

方式二：找到需删除的元素，通过属性parentNode找到其父元素，再删除。例：

var child=document.getElementById("test");//需删除的节点 child.parentNode.removeChild(child);

**jQuery：**

remove()：删除被选元素及其子元素。可提供一个参数对被选元素进行过滤，如：$("p").remove(".del");删除具有类del的p元素及其子元素。  
empty()：从被选元素中删除子元素。

**附加：XML DOM 相关：**

在下面的例子中，我们使用 DOM 引用从 <to> 元素中获取文本：

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

xmlDoc -由解析器创建的 XML 文档 
getElementsByTagName("to")\[0\] - 第一个 <to> 元素 
childNodes\[0\] - <to> 元素的第一个子元素（文本节点） 
nodeValue - 节点的值（文本本身）

[http_blog.csdn.net_qq_19865749_article_details_52494929]: http://blog.csdn.net/qq_19865749/article/details/52494929