DOM操做之——元素的增刪改、樣式修改、插入內容

時間 2020-05-30

標籤 dom 元素增刪樣式修改插入內容欄目 HTML 简体版

原文原文鏈接

雖然如今咱們在開發中已經用不到本身操做DOM了，以前有JQ，如今更是有VUE、REACT兩大框架供咱們使用，可是咱們也有必要了解下，關於原生JS中的DOM操做問題。javascript

前面咱們已經介紹了，DOM操做中獲取元素和節點的方法，
在很早以前咱們也介紹了DOM操做中的盒子模型，
此次咱們就把DOM操做剩餘的幾個知識點一併講解了：包括DOM元素中的增/刪/改，修改DOM元素的樣式，給DOM插入內容，等一系列方法

前面關於DOM咱們已經講解過不少，今天是咱們最後一篇關於DOM的文章，因此咱們在從新寫一下DOM的含義：css

DOM（document object model）:文檔對象模型（提供一系列的屬性和方法，供咱們獲取和操做DOM元素）

基於JS獲取到的DOM元素是「對象數據類型」值，裏面包含不少瀏覽器自帶的，用來操做元素的鍵值對。

1、`DOM`元素中的增長/刪除/修改

思惟導圖

一、建立

語法：document.createElement([標籤名])
動態建立一個DOM元素

二、增長

-1）插入指定容器末尾

語法：[CONTAINER].appendChild([元素])
把元素動態插入到指定容器的末尾

-2）插入指定元素前

語法：[CONTAINER].insertBefore([新元素],[原始頁面中的元素])
把新建立的元素放置到指定容器原始頁面元素的前面
【原始頁面中的元素】確定在【CONTAINER】容器中

三、刪除

語法：[CONTAINER].removeChild([元素])
在指定容器中移除元素

四、給`DOM`設置內容

-1）、innerHTML

給非表單元素設置或者操做其內容
能識別HTML標籤

-2）、innerText

給非表單元素設置或者操做其內容
不能識別HTML標籤

-3）、value

給表單元素設置或者操做其內容

上面咱們簡單介紹了語法和定義，如今咱們簡單操做一下，利用上面的知識，完成下圖效果吧。html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="reset.min.css">
	<style> .addBtn { padding: 5px 15px; font-size: 20px; } .item { width: 300px; padding: 10px; margin-top: 10px; border: 1px dashed #555; } .item li { line-height: 30px; } .item li:nth-child(even) { background-color: #EEE; } </style>
</head>

<body>
	<button class="addBtn">+</button>
	<ul class="item">
		<li>
			我是LI1
			<!-- href="javascript:;" 阻止A標籤點擊跳轉頁面，只把他當作按鈕 -->
			<a href="javascript:;" class="deleteBtn">刪除</a>
		</li>
		<li>我是LI2</li>
	</ul>

	<!-- IMPORT JS -->
	<script> /* * 點擊加號ADDBTN，動態建立一個LI，而且插入到容器ITEM中 */ let addBtn = document.querySelector('.addBtn'), item = document.querySelector('.item'), count = 2; addBtn.onclick = function () { // 1.動態建立一個LI（能夠給其設置樣式或者內容） let newLi = document.createElement('li'); // newLi.style.xxx=xxx newLi.className=xxx ... 新建立的元素是對象，能夠盡情操做 newLi.innerHTML = `我是LI${++count}`; // 2.把建立的LI添加到指定的容器中 // insertBefore 添加到指定元素的前面 // let first = item.firstElementChild; // item.insertBefore(newLi, first); // appendChild 添加到指定容器末尾 item.appendChild(newLi); }; /* * 點擊刪除按鈕移除元素 */ let deleteBtn = document.querySelector('.deleteBtn'); deleteBtn.onclick = function () { // 獲取刪除按鈕的父元素（第一個LI） let parent = deleteBtn.parentNode; // 從容器中移除掉 item.removeChild(parent); }; </script>
</body>
</html>
複製代碼

五、設置自定義屬性

-1）、方法一：利用對象特性

每個元素都是一個對象（堆內存），咱們向堆內存中設置自定義屬性便可
語法：[元素].xxx=xxx; / 元素[xxx]=xxx;

寫在堆內存中的java

獲取方式：console.log([ELEMENT].xxx);

刪除方式：delete [ELEMENT].xxx;

-2）、方法二：利用標籤特性

每個元素也是一個標籤，能夠操做其DOM結構，給結構上新增自定義的屬性
語法：[元素].setAttribute('xxx',xxx);

直接寫在結構上的數組

獲取方式：[元素].getAttribute('xxx');

刪除方式：[元素].removeAttribute('xxx');

兩種方法的區別：原理不同，一個操做的是堆內存，一個操做的是DOM結構，因此不能混用瀏覽器

以上面的結構咱們設置自定義屬性查看效果：app

item['xiaozhima'] = '小芝麻';
// console.dir(item.xiaozhima);
// console.dir(item)
//這裏咱們只打印item查看這個對象的屬性

item.setAttribute('jinse', '金色');
// console.dir(item.getAttribute('jinse'));

console.log(item.xiaozhima); //=>'小芝麻'
console.log(item.getAttribute('xiaozhima')); //=>null

console.log(item.jinse); //=>undefined
console.log(item.getAttribute('jinse')); //=>'金色'
複製代碼

這是上面代碼中咱們console.dir(item)後查看對象中存在咱們設置的屬性名和屬性值; 框架

可是並無找到咱們下面設置的 「item.setAttribute('jinse', '金色');，緣由咱們上面已經說個，這種方式設置，是寫在結構上，那咱們去結構上找一下，是在這裏。

2、操做`DOM`元素樣式

思惟導圖

一、元素.style.xxx

修改（獲取）當前元素的行內樣式
操做的都是行內樣式，哪怕把樣式寫在樣式表中，只要沒有寫在行內上，也獲取不到
獲取當前元素樣式（不論寫在哪，都能獲取到的方法）咱們在JS中的盒子模型一篇已經講過

元素.style.cssText = (反撇)須要設置的全部行內樣式(反撇)ui

這種方式是 style 一個個設置樣式的簡寫，批量給行內上設置不少樣式

二、元素.className

操做的是當前元素的樣式類，基於樣式類的管理給予其不一樣的樣式spa
元素.className = ‘樣式類’
- 這樣操做會把以前的樣式類名給覆蓋掉
元素.className +=「空格樣式類」
- 這樣操做是不覆蓋原有的基礎上設置一個
- 記得加空格分每一個樣式類
元素.classList.add("樣式類")
- 向指定樣式集合中新增一個樣式類
- （兼容性差）

let itemBox = document.getElementById('itemBox'),
    navList = itemBox.getElementsByTagName('li');
// console.dir(itemBox); //=>它是一個對象：itemBox.xxx=xxx
// console.dir(navList); //=>它是一個元素集合HTMLCollection（類數組集合：數字做爲索引，LENGTH表明長度），集合中的每一項是單獨的元素對象 navList[0].xxx=xxx

//===========設置樣式
itemBox.style.color = 'red';
itemBox.style.backgroundColor = 'green'; //=><ul class="item" id="itemBox" style="color: red; background-color: green;"> 設置的結果都是行內樣式
itemBox.style.cssText = `color: red; background-color: green;`; // 這種方式是STYLE一個個設置樣式的簡寫，批量給行內上設置不少樣式

itemBox.className = 'active'; //=>CLASSNAME這樣操做會把以前的樣式類名給覆蓋掉
itemBox.className += ' active'; //=>這樣也能夠，記得加空格區分每一個樣式類
itemBox.classList.add('active'); //=>向指定樣式集合中新增一個樣式類（兼容性差）
複製代碼