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