原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作示例
本文實(shí)例講述了原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作。分享給大家供大家參考，具體如下：
知識(shí)點(diǎn)，依然會(huì)遺忘。我在思考到底是什么原因。想到研究生考試準(zhǔn)備的那段歲月，想到知識(shí)體系的建立，知識(shí)體系分為正向知識(shí)體系和逆向知識(shí)體系；正向知識(shí)體系可以理解為教科書(shū)目錄，逆向知識(shí)體系可以理解考試真題。
按照知識(shí)體系建設(shè)這個(gè)思路，追求長(zhǎng)久的深刻的記憶。決定建立正向知識(shí)體系。本文系正向知識(shí)體系的第一篇。
原生js操作dom節(jié)點(diǎn)：所謂的CRUD，代表create，read，update，del；也就是創(chuàng)建，讀取，更新和刪除。dom提供了api用于創(chuàng)建節(jié)點(diǎn)常用有
var div=document.createElement("div");
var p=document.createElement("p");
div.innerHTML="這是插入內(nèi)容";
var text=document.createTextNode("這是文本內(nèi)容");
var img=new Image();
創(chuàng)建元素、文本內(nèi)容和圖片。創(chuàng)建要和插入一起使用，所以
dom1.appendChild(div);
dom1.insertBefore(div,dom1.querySelector("p"));
function inertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if (parent.lastChild==targetElement) {
parent.appendChild(newElement);
}else{
parent.inertBefore(newElement,targetElement.nestSibling);
}
}
document.getElementById('id名稱(chēng)').preappend(div);//直接插入到父元素第一個(gè)位置
document.getElementById('id名稱(chēng)').append(div);//直接插入到父元素最后位置
//還有另一個(gè)api
dom1.insertAdjacentHTML("afterBegin","<h1> 在文本前容器內(nèi)插入內(nèi)容1</h1>");
dom1.insertAdjacentHTML("beforeEnd","<h2> 在文本后容器內(nèi)插入內(nèi)容2</h2>");
dom1.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入內(nèi)容4</h1>");
dom1.insertAdjacentHTML("afterEnd","<h5> 在文本后容器外插入內(nèi)容5</h2>");
讀取也就是選擇器的功能實(shí)現(xiàn)
//直接選擇器
var dom1=document.getElementById("dom1");
var dom1=document.querySelector("#dom1");
var matches = document.querySelectorAll("div.note, div.alert");
var div=document.getElementsByClassName(".div");
var div=document.getElementsByTagName("div");
//節(jié)點(diǎn)關(guān)系選擇器
var divC=div.innerHTML;//內(nèi)部
var divC=div.outerHTML;//整個(gè)節(jié)點(diǎn)
var divS=div.children;//子節(jié)點(diǎn)集合
var divS=div.firstChild;//第一個(gè)子節(jié)點(diǎn)，如果有空格返回#text
var divS=div.lastChild;//最后一個(gè)子節(jié)點(diǎn)，如果有空格返回#text
var divS=div.nextSibling;//下一個(gè)節(jié)點(diǎn)，如果有空格返回#text
var divS=div.prvSibling;//前一個(gè)節(jié)點(diǎn)，如果有空格返回#text
var divS=div.parentNode;//父節(jié)點(diǎn)
//節(jié)點(diǎn)集合
var form=document.forms[0];//表單集合
var img=document.images[0];//圖片集合
var img=document.links[0];//所有帶連接的a節(jié)點(diǎn)
然后是更新，我理解的是替換，常用實(shí)現(xiàn)
parent.replaceChild(div,dom1.querySelector("p"));
dom1.innerHTML="hhh";
dom1.innerText="999";
最后是刪除的實(shí)現(xiàn)
parent.removeChild(dom1.querySelector("p"));
dom1.innerHTML="";
dom1.innerText="";
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript 中關(guān)于array的常用方法詳解
這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
本文主要介紹了Javascript的this用法，具有很好的參考價(jià)值，有需要了解的朋友可以看看2017-01-01
這篇文章主要介紹了IntersectionObserver API 詳解篇,需要的朋友可以參考下2016-12-12
IIFE 是 JavaScript 中一種重要的設(shè)計(jì)模式,適用于隔離作用域、避免全局變量污染以及一次性執(zhí)行的邏輯,這篇文章主要介紹了JavaScript中的IIFE解析,需要的朋友可以參考下2024-12-12
用瀏覽器無(wú)法調(diào)試異步加載頁(yè)面里包含的js文件。簡(jiǎn)單的說(shuō)就是在調(diào)試工具里面看不到異步加載頁(yè)面里包含的js文件2014-10-10
用JavaScript對(duì)JSON進(jìn)行模式匹配 (Part 2 - 實(shí)現(xiàn))
在上一篇文章里，我們完成了 Dispatcher 類(lèi)的接口設(shè)計(jì)，現(xiàn)在我們就來(lái)考慮一下如何實(shí)現(xiàn)這個(gè)類(lèi)。2010-07-07
Three.js是通過(guò)對(duì)WebGL接口的封裝與簡(jiǎn)化而形成的一個(gè)易用的圖形庫(kù),下面這篇文章主要給大家介紹了關(guān)于uniapp小程序和h5如何使用three.js的相關(guān)資料,需要的朋友可以參考下2022-12-12
ionic實(shí)現(xiàn)下拉刷新載入數(shù)據(jù)功能
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)下拉刷新載入數(shù)據(jù)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js中.sort()函數(shù)的常見(jiàn)用法與高級(jí)操作
JavaScript中的sort函數(shù)可以用來(lái)對(duì)數(shù)組進(jìn)行排序,默認(rèn)情況下sort函數(shù)將數(shù)組中的元素轉(zhuǎn)換為字符串,并按照Unicode碼點(diǎn)的順序進(jìn)行排序,下面這篇文章主要給大家介紹了關(guān)于js中.sort()函數(shù)的常見(jiàn)用法與高級(jí)操作的相關(guān)資料,需要的朋友可以參考下2023-05-05
JS計(jì)算網(wǎng)頁(yè)停留時(shí)間代碼
這篇文章主要介紹了JS計(jì)算網(wǎng)頁(yè)停留時(shí)間的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04