JavaScript 系列博客（八）

前言

本篇博客介紹頁面節點概念、文檔結構以及如何使用 js 操作文檔節點還有事件 target 以及 BOM 操作。

節點

• dom與dom屬性

// DOM: 文檔對象模型 => 提高給用戶操作document obj的標準介面
// DOM樹: 以document為根, 樹狀展開所有子節點

• 節點分類

// 節點分類: 6個
// document | doctype | element | text | attr | comment

• 節點常規操作

var info_node = document.createAttribute("info"); // 創建
console.log(info_node.nodeName);
console.log(info_node.nodeType);
info_node.value = '123'; // 設置
console.log(info_node.nodeValue);
sup1.setAttributeNode(info_node); // 添加

文檔結構(element元素範圍)

// 父級
console.log(sup.parentElement)
// 子級們
console.log(sup.children);
// 第一個子級
console.log(sup.firstElementChild);
// 最後一個子級
console.log(sup.lastElementChild);
// 上兄弟
console.log(sup.previousElementSibling);
// 下兄弟
console.log(sup.nextElementSibling);
// 註: 文檔結構操作是可以採用連.語法
// sup.children[0].parentElement  // 自己

文檔元素節點操作

// 操作步驟
// 1. 創建div(元素節點)
// 2. 設置div屬性(單一css | css類名 | 文本 | 子標簽 | 事件 | ...)
// 3. 添加到(文檔結構中)指定位置

// 創建:只能由document調用
var box = document.createElement('div');
// 在body元素的最後追加一個子元素
body.appendChild(box);
// 在body元素oldEle之前插入一個子元素
body.insertBefore(box, oldEle);
// 從body中刪除box元素,可以接受返回值,就是刪除的元素
var res = body.removeChild(div);
// 將body中oldEle元素替換為box,可以接受返回值,就是被替換的元素
res = bodyreplaceChild(box, oldEle);
// true深拷貝,拷貝自身與內容, false淺拷貝,只拷貝自身標簽
box.cloneNode()

事件對象target屬性

// ev.target通過父級的事件對象,獲取具體相應區域位置的子級元素

// 應用場景
// 1. 父級的子元素類型不同一,採用迴圈綁定不方便
// 2. 父級子元素較多或不確定

BOM操作

// BOM: Browser Object Model, 提供用戶與瀏覽器交互的標準介面
// BOM的頂級對象為window對象, 頁面中出現的其實所有對象都是window的子對象
// 重要的子對象
// document | history | location | navigator | screen

// location => url信息
console.log(location);
// 功能變數名稱:埠號
console.log(location.host);
// 功能變數名稱
console.log(location.hostname);
// 埠號
console.log(location.port);
// 查詢信息
console.log(location.search);

// history
history.back() | history.forward() | history.go(-num | num)

// navigator
console.log(navigator.userAgent)
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36