如何操作（增、刪、改、查）常見的 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

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 代表元素物件）

注：此表僅例舉了少部分常用的元素取值和賦值方式，其他的節點可自行測試，使用哪種方式。

三、特殊需求處理

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