如何操作（增、删、改、查）常见的 HTML 元素呢？（包含原生 js 和 JQuery 语法对照）

如何,操作,常见,html,元素,包含,原生,js,jquery,语法,对照 · 浏览次数 : 398

小编点评

**方法定义** ``` 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,element) // element 为原生 Element 对象 { console.log(index,element.innerHTML) } ) 。归纳总结以上内容，生成内容时需要带简单的排版 ``` **方法使用** ``` $(selector1).find(selector2) .each( function(index,element) // element 为原生 Element 对象 { console.log(index,element.innerHTML) } ) 。归纳总结以上内容，生成内容时需要带简单的排版 ``` **注意** * `each()` 方法的入参可以是多个元素。 * `selector2` 是要查找的元素的类名或标签名。 * `element.innerHTML` 是元素的innerHTML值。

正文

一、通用的操作示例

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)
        }
    )

 

如何 操作 常见 html 元素 包含 原生 js jquery 语法 对照

与如何操作（增、删、改、查）常见的 HTML 元素呢？（包含原生 js 和 JQuery 语法对照）相似的内容：

如何操作（增、删、改、查）常见的 HTML 元素呢？（包含原生 js 和 JQuery 语法对照）

本文包含针对常见 HTML 元素的增删改查等操作，从原生 js 和 JQuery 两个纬度进行对比列举。

如何 操作 常见 html
398
数仓在线运维：如何进行在线增删CN？

摘要：集群运行过程中，根据集群的综合负载和业务接入情况进行分析：增加CN可以适当降低CPU消耗，增大接入连接数，分散CN节点业务压力，根据实际情况来识别是否要增加CN,如果是提升集群容量和扩展比能力，建议进行扩容操作。 本文分享自华为云社区《【玩转PB级数仓GaussDB(DWS)】在线运维-在线增

在线 如何 进行 增删
38
pyqt5 子线程如何操作主线程GUI

一.简介 在使用pyqt5编写gui时遇到两个问题，会导致界面崩溃，今天就围绕这两个问题来简单说明和改进。 1.在主线程中使用while无限循环会导致界面崩溃 2.在子线程中操作主线程gui会导致界面崩溃 二.步骤说明 1.在主线程中使用while无限循环会导致界面崩溃 1）错误代码 import

pyqt5 gui
7
Spring如何控制Bean的加载顺序

正常情况下，Spring 容器加载 Bean 的顺序是不确定的，那么我们如果需要按顺序加载 Bean 时应如何操作？本文将详细讲述我们如何才能控制 Bean 的加载顺序。

spring bean
9
【Azure 应用服务】当在Azure App Service的门户上 Log Stream 日志无输出，需要如何操作让其输出Application Logs呢?

问题描述 在Azure App Service的门户上 Log Stream 日志无输出，需要如何操作让其输出Application Logs呢? 如下图所示： 问题解答 请注意，上图中提示说：Application logs are switched off. You can turn them

Azure Service Logs 应用
29
Canvas简历编辑器-我的剪贴板里究竟有什么数据

Canvas图形编辑器-我的剪贴板里究竟有什么数据 在这里我们先来聊聊我们究竟应该如何操作剪贴板，也就是我们在浏览器的复制粘贴事件，并且在此基础上聊聊我们在Canvas图形编辑器中应该如何控制焦点以及如何实现复制粘贴行为。 在线编辑: https://windrunnermax.github.io/

canvas
14
C# AutoCAD 利用Editor.CommandAsync 同步监测自带命令的执行情况

#1官方文档并无相关解释：AutoCAD 2023 Developer and ObjectARX Help | Editor.CommandAsync Method | Autodesk #2 上例子，我用自带的命令画一个圆，画完后我要修改它的颜色，此时该如何操作呢，下面是可用的代码 [Comma

c# autocad 利用 editor
22
Azure Function 时区设置

一，引言 Azure Function 上的默认使用UTC 运行程序，我们在获取时间，或者通过时间执行某些逻辑时，返回UTC 时间，导致业务数据不正常，由于 Azure Function 是微软提供的 IaaS 托管服务，我们无法登录服务器来修改时区，那么我们今天将来实践操作，如何通过配置达到更改

azure function
36
布谷鸟过滤器解析

在我的记忆中布谷鸟过滤器一直是说比bloom好,那么我博客便以一个diss布谷鸟过滤器的角度来探究 学前须知:本篇立足于读者了解bloomfilter底层实现上 布谷鸟相较于bloom的优点 支持删除操作 如何支持呢?因为bloom的话是不能支持的,他的一个bit可能代表了多个key存在的情况,所以

0
初探富文本之OT协同实例

初探富文本之OT协同实例 在前边初探富文本之OT协同算法一文中我们探讨了为什么需要协同、为什么仅有原子化的操作并不能实现协同、为什么要有操作变换、如何进行操作变换、什么时候能够应用操作、服务端如何进行协同调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如ot.js、

初探 文本 ot 协同
289
# 热门排行
微软 New Bing AI 申请与使用保姆级教程（免魔法） ChatGPT API使用介绍 ChatGPT开发实战 一篇带你了解如何使用纯前端类Excel表格构建现金流量表 手把手教你玩转 Excel 数据透视表 为什么 C# 可能是最好的第一编程语言 .NET 入门到高级路线 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件 React + Springboot + Quartz，从0实现Excel报表自动化 用Echarts实现前端表格引用从属关系可视化
© PmDaddy. 2023 PmDaddy教程网 All rights reserved.