如何操作（增、删、改、查）常见的 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)
        }
    )
posted @   橙子家  阅读(939)  评论(1)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛