一、通用的操作示例

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('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");

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()
// *****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)
        }
    )