一、操作 html 頁面

document.getElementById('box'); // 選中一個id為box的標簽

可以理解為從文檔里面 通過一個 id:box 來獲取 一個元素
// => document 文檔 ? get 得到 ? Element 元素 ? By 通過 ? id:box

二、操作標簽內容：

innerHTML – 會解析標簽

var box = document.getElementById("box"); box.innerTHML = "<p>我被添加到了盒子里面</p>";console.log(box.innerHTML); // <p>....</p>

innerText – 不會解析標簽

var box = document.getElementById("box"); box.innerText = "<p>我會添加到box里面</p>";console.log(box.innerText); // 我會添加到box里面

三、變量：

變量的初始化

var name = 'mary'; var lastName = 'bob';

變量必須先聲明再賦值

a = 123; console.log(a); // 123 -- 理論上是不可以的// 必須先聲明再賦值 var a; a = 123;// 或者直接一步到位 var a = 123;

聲明變量，沒賦值默認為 undefined

var a; console.log(a); // undefined

變量不聲明就使用會報錯

console.log(a); // a is not defined

不使用 var 聲明的變量，會變成全局變量，掛到 window對象 上面

a = 123 === window.a = 123

變量多次賦值以最后一次賦值為準

var a = 132; a = 465; console.log(a); // 465

var 定義多個變量，用逗號隔開

// bad var a = 123; var b = 456; var c = 789;// good --> 規范的寫法 var a = 123,b = 456,c = 789;

四、變量的命名規則

嚴格區分大小寫

var abc = 123; var ABC = 123; // 這是兩個不同的變量

見名知意

var fadfaf13 = 134423; × // 別人不知道你這是什么var inputValue = 131; var keyCode = 65;

不能以數字開頭，只能包含字母、下劃線、數字和$(美元符)

var 1abc = 113; × var a1 = 123; var _name = 133; var $val = 123;

不能使用中文

var 你好 = 133; ×

不能使用 關鍵字(已經有了特殊功能的) 和 保留字(未來可能使用的文字)

var class = ...; × var var = ...; ×

必須遵守 駝峰命名法（大駝峰、小駝峰）

var myBox = ...; var thisTemp = ...;

五、DOM操作之獲取標簽方法

通過 id 獲取

var box = document.getElementById("box");

通過 class 獲取

var aStu = document.getElementsByClassName("names");

通過 標簽名 獲取

var aUl = document.getElementsByTagName("ul");

通過 name (表單)獲取

var aName = document.getElementsByName("username");

獲取 一堆標簽中的第一個

var oLi = document.querySelector("#box > ul > li");

獲取 一堆標簽

var aLi = document.querySelector("#box > ul > li");

獲取 html 標簽

var html = document.documentElement;

獲取 body 標簽

var body = document.body;

獲取 head 標簽

var head = doucment.head;

獲取網頁標題 title

var titleVal = document.title;

建議獲取單個用 getEle..... 獲取多個用 querySelectorAll
獲取多個元素，最終得到的是一個元素數組，取的話用索引就可以了 arr[0]

六、給元素添加樣式：

Element.style.屬性名 = 屬性值

var box = document.querySelector('box'); box.style.display = 'none';

element.style.classText

box.style.classText = `width: 200px;height: 200px;background-color: red;margin: 10px 0 0 10px; `;

樣式屬性比較多就用 classText ，樣式少就直接加

Element.classList – 操作已經存在的 class

• length ? 返回類列表里面類名的個數
• add() ? 添加一個或者多個類名
• remove()? 移除一個或者多個類名
• toggle(class, [true | false]) ? 第二個參數可選，用于強制添加或者移除類名，不管這個類名是否存在。為 true 就是添加，false 移除
• contains(class) ? 判斷指定的類名是否存在，返回 true / false
• item(index) ? 返回索引對應的類名，從 0 開始

let title = document.querySelector('.title'); // 添加類 title.classList.add('red', 'pink', 'blue', 'green', 'yellow', 'purple', 'brown'); // 輸出一共有多少個類名 console.log(title.classList.length); // 8 // 移除類名 title.classList.remove('red', 'pink'); console.log(title.classList.length); // 6 title.onclick = function () {// 切換類title.classList.toggle('show'); } // 判斷制定的類名是否存在 console.log(title.classList.contains('title')); // 返回元素中索引值對應的類名 console.log(title.classList.item(0)); // title

總結

以上是生活随笔為你收集整理的DOM操作获取标签方法、数据类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。