如何操作(增、删、改、查)常见的 HTML 元素呢?(包含原生 js 和 JQuery 语法对照)
一、通用的操作示例
1、查询
根据 id 查询(结果为单个对象)
// 原生 js 写法 | |
var elementobj = document.getElementById("elementid"); | |
// 原生 js 链式查询写法(注意:被查询的对象需为单个唯一对象,若为 list 则返回失败) | |
var elementobj2 = document.getElementById('direction').getElementsByTagName('span'); | |
// JQuery 写法 | |
var elementobj = $("#elementid"); |
根据类 class 名查询(结果为一组对象,需通过序号来指定单个对象)
// 原生 js 写法 | |
var elementobjlist = document.getElementsByClassName("elementclassname"); | |
// JQuery 写法 | |
var elementobjlist = $(".elementclassname"); |
根据属性查询(两种写法结果不同)
// 原生 js 写法(若存在多个,仅返回第一个) | |
var elementobj = document.querySelector("div[dataid='elementdataid']"); | |
// 原生 js 写法(返回一组元素 list) | |
var elementobjlist = document.querySelectorAll("div[dataid='elementdataid']"); | |
// JQuery 写法(返回一组元素 list) | |
var elementobjlist = $("div[dataid='elementdataid']"); |
根据元素类型查询(结果为一组对象,需通过序号来指定单个对象)
// 原生 js 写法 | |
var elementobjlist = document.getElementsByTagName('div'); | |
// JQuery 写法 | |
var elementobjlist = $('div'); |
复合查找(查询条件相同,返回均为一个 list)
// 原生 js 写法 | |
// 多个属性 | |
var elementobjlist = document.querySelectorAll('input[type=radio][name=TestBtn]'); | |
var elementobjlist = document.querySelectorAll('input[type=radio][name!=TestBtn]'); // != 不等于 | |
// 类名 | |
var elementobjlist = document.querySelectorAll('textarea[class="textareaclassname"]'); | |
var elementobjlist = document.querySelectorAll('textarea.textareaclassname'); | |
var elementobj0 = elementobjlist[0]; | |
var elementobj1 = elementobjlist[1]; | |
// JQuery 写法 | |
// 多个属性 | |
var elementobjlist = $('input[type=radio][name=radioname]'); | |
// 类名 | |
var elementobjlist = $("textarea[class='textareaclassname']"); // 查询全部包含类名 tbox_mutiLineBox 的 textarea 元素 | |
var elementobjlist = $("textarea.textareaclassname"); | |
// 其他 | |
var elementobj = $("textarea:first"); // 第一个 | |
var elementobj = $("textarea:last"); // 最后一个 | |
var elementobjlist("textarea:gt(2)"); // 返回除了前两个元素外的,其他全部满足条件元素集合 | |
var elementobjlist("textarea:lt(2)"); // 返回满足条件列表的前两个 | |
var elementobjlist("div:not(#divid)"); // 返回全部 div 除了 id 为 divid 的这个元素 | |
var elementobjlist("input:disabled"); // 返回全部不可用的 input 元素 | |
var elementobjlist("select option:selected"); // 返回全部被选中的元素 | |
// 模糊匹配 | |
var elementobjlist("div[name^='t']"); // name 以 t 开头 | |
var elementobjlist("div[name$='e']"); // name 以 e 结尾 | |
var elementobjlist("div[name*='four']"); // name 包含 four |
//20230317 添加 | |
// 模糊查询 | |
// 原生 js | |
var elementobj = Array.from(document.querySelectorAll('a')) | |
.find(el => el.textContent.includes('返回')); // 返回匹配的第一个元素对象 | |
var elementtext = elementobj.innerText; // 取出元素的文本 | |
// JQuery | |
var elementobjlist = $("a:contains('返回')"); | |
var elementtext = elementobjlist.text(); // 取出全部元素的文本 | |
var elementtext = elementobjlist[0].innerText; // 取出第一个元素的文本 |
2、修改
获取和修改样式 style
// 原生 js 方式 | |
var widthvalue = document.getElementById(selector).style.width; // 获取样式的具体值 | |
document.getElementById(selector).style.width='40px'; | |
// JQuery 方式 | |
var colorvalue = $(selector).css("color"); // 获取样式的具体值 | |
$(selector).css("color","red"); // 修改样式 color 的值为 red 等,允许连续多组 | |
$(selector).css({ | |
"color":"white", | |
"font-size":"20px" | |
}); |
获取和修改属性 attribute
// 原生 js 方式 | |
document.getElementById(selector).setAttribute('style','height:400px;'); // 原先有值的直接替换 | |
document.getElementById(selector).removeAttribute('style'); | |
document.getElementById(selector).id = "elementid"; // 给属性赋值,注不支持自定义属性 | |
var stylevalue = document.getElementById(selector).getAttribute('style'); | |
// JQuery 方式 | |
$(selector).attr("style","全部样式"); // 修改属性 style 的值 | |
$(selector).attr({"style":"全部样式"}); | |
$(selector).removeAttr('style'); // 移除名字为 style 属性 | |
$(selector).attr("style"); // 获取属性 style 的值 |
修改类 class
// 原生 js 方式 | |
var classname = document.getElementById(selector).className; // 获取类型属性的值 | |
document.getElementById(selector).className = 'classname'; // 若原来有值,将会被替换 | |
document.getElementById(selector).className += ' classname2'; // 注意:类名前需加一个空格,且不能省略 | |
document.getElementById(selector).classList.add('classname2'); // 在原有类的基础上,添加 | |
document.getElementById(selector).classList.replace('classname','classname2'); // 将 classname 替换为 classname2 | |
var booleannn = document.getElementById(selector).classList.contains('classname'); // 若包含就返回 true | |
// JQuery 方式 | |
var classname = $(selector).attr("class"); // 获取类型属性的值 | |
$(selector).addClass("classname"); // 添加类 | |
$(selector).removeClass("classname"); // 删除类 | |
$(selector).toggleClass("classname"); // 切换类,如果有则删除,如果没有则添加 |
3、删除
// 删除指定的元素 | |
document.getElementById('elementid').remove(); | |
$("#elementid").remove(); | |
$("p").remove(".italic"); // 条件删除,目的:删除 class 名为“italic”的全部 p 标签 | |
// 连同父级元素一同删掉(注:此处省略了空对象 null 的判断) | |
document.getElementById('elementid').parentNode.remove(); | |
$("#elementid").parent().remove(); | |
// 清空一个元素,即删除一个元素的所有子元素 | |
function RemoveAllChildNode(elementid) { | |
var elementobj = document.getElementById(elementid); | |
while(elementobj.hasChildNodes()) // 一直循环到 elementobj 不包含子节点 | |
{ | |
elementobj.removeChild(elementobj.firstChild); | |
} | |
} | |
$('#elementid').parent().empty(); // JQuery 一句话可搞定 |
4、新增
原生 js 创建元素示例:
// 创建一个元素 | |
var p_first = document.createElement("p"); | |
p_first.id = "pid"; | |
p_first.className = "pclassname"; | |
p_first.setAttribute('name', 'pname'); | |
p_first.innerText='我是一个 p 标签!'; | |
// 父元素 elementobj,可能是一个 list,若为单一元素,则后续引用无需加 [0] | |
const elementobj = document.querySelectorAll(selector); | |
// 在目标元素中插入 | |
elementobj[0].appendChild(p_first);//直接添加在末尾 | |
// 插入元素写法,入参有四种类型: | |
// beforebegin:目标元素的前面 | |
// afterbegin:目标元素中,第一个子节点之前 | |
// beforeend:目标元素中,最后一个子节点之后 | |
// afterend:目标元素的后面 | |
elementobj[0].insertAdjacentElement('beforeend',p_first); | |
// 插入 html 写法,入参有四种类型: | |
// beforebegin:目标元素的前面 | |
// afterbegin:目标元素中,第一个子节点之前 | |
// beforeend:目标元素中,最后一个子节点之后 | |
// afterend:目标元素的后面 | |
var p_html = '<p>我是一个 p 标签!</p>'; | |
elementobj[0].insertAdjacentHTML('beforeend',p_html); | |
// 用 p_html 替换目标元素中的全部内容 | |
elementobj[0].innerHTML = p_html; |
JQuery 创建元素示例:
var elementobj = $('<p>这是一个P标签</p>'; | |
// 五种方法 将 p 标签添加到页面中: | |
// 1、替换目标元素中的内容,原内容将清空 | |
// 若查询结果为 elementlist 则全部实体均会被新内容替换 | |
$(selector).html('<p>这是一个P标签</p>'); | |
// 2、添加到目标元素中的末尾,原内容保留 | |
// 若查询结果为 elementlist 则全部实体均会添加 elementobj | |
// 若连续添加多个元素,则会依次排列在已添加元素之后 | |
$(selector).append(elementobj); | |
// 3、添加到目标元素中的开头,原内容保留 | |
// 若查询结果为 elementlist 则全部实体均会添加 elementobj | |
// 若连续添加多个元素,则会依次排列在已添加元素之前 | |
$(selector).prepend(elementobj); | |
// 4、添加到目标元素之前 | |
// 若查询结果为 elementlist 则全部实体均会添加 elementobj | |
// 若连续添加多个元素,当前新增元素紧挨目标元素之前,已添加元素列表之后 | |
$(selector).before(elementobj); | |
// 5、添加到目标元素之后 | |
// 若查询结果为 elementlist 则全部实体均会添加 elementobj | |
// 若连续添加多个元素,当前新增元素紧挨目标元素之后,已添加元素列表之前 | |
$(selector).after(elementobj); |
二、不同元素的取值与赋值
常见元素的例举如下表:(object 代表元素对象)
元素名 | 取值(原生 js) | 取值(JQuery) | 赋值(原生 js) | 赋值(JQuery) |
<a> <b> <body> <button> <div> <label> <p> <span> <th> //表格标题 <td> //表格单元格 |
object.innerText // 纯文本 object.innerHTML // 含 html 标记 |
object.text() // 纯文本 object.html() // 含 html 标记 |
object.innerText="文本" // 纯文本 object.innerHTML="文本" // 含 html 标记 |
object.text("文本") // 纯文本 object.html("文本") // 含 html 标记 |
<input> <select> <textarea> |
object.value |
object.val() |
object.value="文本" | object.val("文本") |
注:此表仅例举了少部分常用的元素取值和赋值方式,其他的节点可自行测试,使用哪种方式。
三、特殊需求处理
1、针对不同级别元素的操作
简而言之,就是在 DOM 树上进行多向查找。假设你所在其中一个分支,对上级、同级、下级进行查找和操作。
以下简单列举一下常用的方法:
// *****原生 js 方式***** | |
var element = document.getElementByName(selector); | |
var parentnodes = element.parentNode; // 获取父节点 | |
var parentnodes = element.parentElement; // 获取父节点 | |
var siblingnode = element.nextSibling; // 获取下一个同级对象 | |
var siblingnode = element.nextElementSibling; // 获取下一个同级元素 | |
var siblingnode = element.previousSibling; // 获取上一个同级对象 | |
var siblingnode = element.previousElementSibling; // 获取上一个同级元素 | |
var childnodes = element.firstChild; // 获取第一个子对象 | |
var childnodes = element.firstElementChild; // 获取第一个子元素 | |
var childnodes = element.lastChild; // 获取最后一个子对象 | |
var childnodes = element.lastElementChild; // 获取最后一个子元素 | |
var childnodes = element.childNodes; // 获取全部子节点,注意不存在 childNode 属性 |
// *****JQuery 往上查找-父级***** | |
// 其中 $(selector) 返回多个对象,则父元素也为对应的对象个数 | |
var elementobjlist = $(selector).parent(); | |
// 即使 elementobjlist 只有一个对象,仍需要通过 [n] 来引出 | |
var parentvalue = elementobjlist[0].text(); | |
// 若 $(selector) 包含多个元素,返回的为各个元素去重后的全部父级,一直到 <html>(包含)层 | |
var elementobjlist = $(selector).parents(); | |
// 仅取查询结果的第一个元素的全部父级,注:$(elementobj) 可以将元素转为 JQuery 对象 | |
var elementobjlist = $($(selector)[0]).parents(); | |
// 返回全部父级元素,直到 $(selector2)(不包含) | |
var elementobjlist = $(selector1).parentsUntil($(selector2)); |
// *****JQuery 平行查找-同级***** | |
// 返回全部同级的同级元素,不包含本身 | |
var elementobjlist = $(selector).siblings(); | |
// 通过 [n] 引出的对象为 Element 对象,需要通过原生 js 语法来取值 | |
var elementtext = $(selector).siblings()[0].innerText; | |
// 通过 $(Element) 将 Element 对象转为 JQuery 对象 | |
var elementtext = $($(selector).siblings()[0]).text(); | |
// 返回查询对象本身 | |
var elementobjlist = $(selector).siblings().next(); | |
// 返回查询对象以及其后的全部同级元素,包行查询对象本身 | |
var elementobjlist = $(selector).siblings().nextAll(); | |
// 返回查询对象以及其后的同级元素,直到 $(selector2)(不包含) | |
var elementobjlist = $(selector1).siblings().nextUntil($(selector2)); | |
// 往前查询同级元素,类似往后,不再列举 | |
// prev()、prevAll()、prevUntil() | |
// 同级元素的查询 | |
var elementobjlist = $("#divid1+div"); // 同级元素的上一个 | |
var elementobjlist = $("#divid1~div"); // 同级元素的下一个 |
// *****JQuery 往下查找-子级***** | |
// 返回全部子一级的元素,子级下的孙级、重孙等不包含 | |
var elementobjlist = $(selector).children(); | |
// 返回满足 selector2 子一级的元素,不包含子级以下的孙级、重孙等 | |
var elementobjlist = $(selector1).children(selector2); | |
// 查询 $(selector1) 的全部下级,返回满足 selector2 的全部元素,无论是在哪一级 | |
var elementobjlist = $(selector1).find(selector2); |
2、对元素 list 遍历
// *****原生 js 方式***** | |
// 在自定义 each 方法之前,需要了解的两个函数: | |
// 1、call() 方法 | |
var person = { | |
fullName: function(city, country, city2, country2) { // 此处的入参个数不限 | |
return this.firstName + " " + this.lastName + "," + city + "," + country + "," + city2 + "," + country2; | |
} | |
} | |
var person1 = { | |
firstName:"Bill", | |
lastName: "Gates" | |
} | |
person.fullName.call(person1, "Seattle", "USA", "Seattle2", "USA2"); // person1 就是方法定义中的 this,数据类型不限 | |
// 输出结果: Bill Gates,Seatle,USA,Seattle2,USA2 | |
// 2、every() 方法的全部回调列举 | |
every((element) => { /* … */ } ) // 箭头函数 | |
every((element, index) => { /* … */ } ) | |
every((element, index, array) => { /* … */ } ) | |
every(callbackFn)// 回调函数,thisArg:执行 callback 时使用的 this 值 | |
every(callbackFn, thisArg) | |
every(function(element) { /* … */ })// 内联回调函数,thisArg:执行 callback 时使用的 this 值 | |
every(function(element, index) { /* … */ }) | |
every(function(element, index, array){ /* … */ }) | |
every(function(element, index, array) { /* … */ }, thisArg) | |
// every() 示例 1: | |
function isBigEnough(element, index, array) { | |
return element >= 10; | |
} | |
[12, 5, 8, 130, 44].every(isBigEnough); // false | |
[12, 54, 18, 130, 44].every(isBigEnough); // true | |
// every() 示例 2: | |
[12, 5, 8, 130, 44].every(x => x >= 10); // false | |
[12, 54, 18, 130, 44].every(x => x >= 10); // true | |
// 自定义函数实现 each 方法 | |
var each = function(object, callback){ // callback 为回调函数名 | |
var type = (function(){ | |
switch (object.constructor){ | |
case Object: | |
return 'Object'; | |
break; | |
case Array: | |
return 'Array'; | |
break; | |
case NodeList: | |
return 'NodeList'; | |
break; | |
default: | |
return 'null'; | |
break; | |
} | |
})(); | |
// 为数组或类数组时,返回:index, value | |
if(type === 'Array' || type === 'NodeList'){ | |
// 由于存在类数组 NodeList, 所以不能直接调用 every 方法 | |
// [].every() 空数组调用 every 方法,总是返回 true | |
[].every.call(object, function(v, i){ // object 为函数 call 的 this 对象,every() 的入参就是 function() 函数对象 | |
return callback.call(v, i, v) === false ? false : true; | |
}); | |
} | |
// 为对象格式时,返回:key, value | |
else if(type === 'Object'){ | |
for(var i in object){ | |
if(callback.call(object[i], i, object[i]) === false){ | |
break; | |
} | |
} | |
} | |
} | |
// 测试 1 | |
>var arr=[1,2,3,4,5] | |
>each(arr,function(index,value){console.log("each-result:",index,"-",value)}) | |
each-result: 0 - 1 | |
each-result: 1 - 2 | |
each-result: 2 - 3 | |
each-result: 3 - 4 | |
each-result: 4 - 5 | |
// 测试 2 | |
>var obj={name:"jsname",age:18} | |
>each(obj,function(index,value){console.log("each-result:",index,"-",value)}) | |
each-result: name - jsname | |
each-result: age - 18 | |
// 测试 3 | |
>var elementslist = document.querySelectorAll('input'); // 注意此处必须用返回类型为 NodeList 即 querySelectorAll 查询 | |
>each(elementslist,function(index,value){console.log("each-result:",index,"-",value)}) | |
eachjs-result: 0 <input type="text"></input> | |
eachjs-result: 1 <input type="radio"></input> | |
eachjs-result: 2 <input type="radio"></input> |
// *****JQuery 方式***** | |
$(selector1).find(selector2) | |
.each( | |
function(index,element) // element 为原生 Element 对象 | |
{ | |
console.log(index,element.innerHTML) | |
} | |
) |