// yi獲取元素節點
//一 ：過id的方式( 通過id查詢元素，大小寫敏感，如果有多個id只找到第一個)
document.getElementById('div1');

// 通過類名查詢元素，多個類名用空格分隔,得到一個HTMLCollection(一個元素集合，有length屬性，可以通過索引號訪問裡面的某一個元素)
var cls = document.getElementsByClassName('a b');
console.log(cls);

// 通過標籤名查詢元素 返回一個HTMLCollection
document.getElementsByTagName('div');

// 通過name屬性查詢，返回一個NodeList(一個節點集合，有length屬性，可以通過索引號訪問)
var nm = document.getElementsByName('c');
console.log(nm);

// 獲取所有form標籤(得到一個HTMLCollection集合）
var form = document.forms;

// html5新加標籤（ie8+）
// document.querySelector(); // 返回單個node，如果有多個匹配元素就返回第一個
// document.querySelectorAll(); // 返回一個nodeList集合

// 建立元素，只是創建出來並未新增到html中，需要與appendChild 配合使用
var elem = document.createElement('p');
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新建立的節點';
document.body.appendChild(elem);

// 建立文字節點 createTextNode
var txt = document.createTextNode('我是文字節點');
document.body.appendChild(txt);

// 克隆節點（需要接受一個引數來表示是否複製元素）
var form = document.getElementById('test');
var clone = form.cloneNode(true);
clone.id = 'test2';
document.body.appendChild(clone);



// 3 節點修改API
//節點修改APi有兩個特點
// 1 不論新增還是替換節點，如果原本就在頁面上，就會被替換
// 2 修改之後節點本身繫結的事件不會小時

// 1 appendChild ()
// 用法是： parent.appendChild(child)
// 會將child節點新增到parent裡的最後面，如果子節點原本就存在，會移除原節點，新增新節點
// 到最後，但是事件會保留

// 2 insertBefore()
// 用法是 parent.insertBefore(newNode,refNode);
// refNode 是必須傳的 不傳會報錯
// 如果 refNode 是undefined 和null 就會將新節點傳入到parent節點的最後

// 3 removeChild()
// 用法是：parent.removeChild(child)
// 如果刪除的不是父元素的子節點會報錯
// var deleted = parent.removeChild(child)
// deleted 可以繼續引用節點 ，被刪除節點依然存在與記憶體中

// 4 replaceChild()
// 用法是：parent.replaceChild(newChild, oldChild);

// 4 節點的關係APi
// 1 父關係API
// parentNode 父節點
// parentElement父元素

// 2 子關係API
// children 子元素
// childNodes 子節點
// firstElementChild 第一個子元素
// firstChild 第一個子節點
// lastElementChild 最後一個子元素
// lastChild 最後一個子節點

// 3 兄弟關係的API
// previousSibling 節點的上一個兄弟節點
// previousElementSibling 節點的上一個兄弟元素（ie9以下不支援）
// nextSibling 節點的下一個兄弟節點
// nextElementSibling 節點的下一個兄弟元素（ie9以下不支援）


// 5 節點屬性API
// setAttribute(name,value) 給元素設定屬性
// getAttribute(name) 獲取元素屬性

// 6 直接修改元素的樣式
elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

// 7 動態新增樣式
var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);



一、nodeName 屬性: 節點的名稱，是隻讀的。<br/>

1. 元素節點的 nodeName 與標籤名相同<br/>
2. 屬性節點的 nodeName 是屬性的名稱<br/>
3. 文字節點的 nodeName 永遠是 #text<br/>
4. 文件節點的 nodeName 永遠是 #document<br/>

二、nodeValue 屬性：節點的值<br/>

1. 元素節點的 nodeValue 是 undefined 或 null<br/>
2. 文字節點的 nodeValue 是文字自身<br/>
3. 屬性節點的 nodeValue 是屬性的值<br/>

三、nodeType 屬性: 節點的型別，是隻讀的。以下常用的幾種結點型別:<br/>

元素型別 節點型別<br/>
！元素 1<br/>
屬性 2<br/>
！文字 3 空格也是返回3<br/>