一、通用的操作示例
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) | |
| } | |
| ) |