js基礎高階4
阿新 • • 發佈:2018-12-28
1. 節點
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); // 新增
2.文件結構(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 // 自己
3.文件元素節點操作
// 操作步驟 // 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()
4.事件物件target屬性
// ev.target通過父級的事件物件,獲取具體相應區域位置的子級元素 // 應用場景 // 1. 父級的子元素型別不同一,採用迴圈繫結不方便 // 2. 父級子元素較多或不確定
5.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