筆記整理：關於Javascript---Dom操做篇

1、查找獲取元素

getElementById()           //經過元素Id，惟一性
getElementsByClassName()   //經過類名 獲取一組元素
getElementsByTagName()     //經過標籤名 獲取一組元素 
getElementsByName()        //經過name屬性 獲取一組元素 好比<from name="aa">
querySelector()         //經過CSS 選擇器（id、類名、類型、屬性、屬性值等等）獲取一個元素
querySelectorAll()      //經過選擇器 獲取一組元素

# 父子兄弟等等

Node.parentNode      //元素的父節點
Node.parentElement   //元素的父Element節點

Node.childNodes      //元素的全部子節點
Node.children        //元素的全部Element節點

Node.firstChild          //第一個節點 
Node.firstElementChild   //第一個Element子節點

Node.lastChild          //最後一個節點
Node.lastElementChild   //最後一個Element子節點

Node.previousSibling //元素的前一個節點
Node.nextSibling     //元素的後一個節點
Node.childElementCount  //當前節點全部Element子節點的數目

補充：node節點包含了標籤 和 文本節點。 element節點就是標籤節點

每一個節點都有三個屬性

• nodeType 用於獲取節點的類型,返回數值：
  1:爲元素節點 2:爲屬性節點 3:爲文本節點
• nodeName 節點名
  元素節點的節點名就是標籤名，以大寫形式表示
• nodeValue 節點值
  元素節點沒有節點值，值爲null,文本節點的節點值就是文本，屬性節點的節點值就是該屬性值。

2、建立新節點

document.createElement(tagName)   //用來生成HTML元素節點。

document.createTextNode(text)    //用來生成文本節點

document.createAttribute(name)  //生成一個新的屬性對象節點，並返回它。

document.createDocumentFragment()  //生成一個DocumentFragment對象 裝載DOM片斷

3、添加刪除元素

Node.appendChild(element)  //添加 HTML 元素

Node.removeChild(element)  //刪除 HTML 元素

Node.replaceChild(element) //替換 HTML 元素

Node.insertBefore(element) //在元素以前插入

//解析HTML字符串，而後將生成的節點插入DOM樹的指定位置。
語法：Element.insertAdjacentHTML(位置, htmlString); 
    # 在該元素前插入 
    Element.insertAdjacentHTML('beforeBegin', htmlString);
    # 在該元素第一個子元素前插入 
    Element.insertAdjacentHTML('afterBegin', htmlString);
    # 在該元素最後一個子元素後面插入 
    Element.insertAdjacentHTML('beforeEnd', htmlString);
    # 在該元素後插入
    Element.insertAdjacentHTML('afterEnd', htmlString);

4、ChildNode接口

Node.remove()  //刪除當前節點

Node.before()  //當前節點前插入

Node.after()   //當前節點後插入

Node.replaceWith()  //替換

5、屬性方法

# ---property  對JS對象的屬性的修改---
element.style.property = new style //改變 HTML 元素的樣式


# ---attribute  對html標籤屬性的讀取或修改---
    # 對標籤屬性設值：element.屬性=值;  element.setAttribute("屬性","值")
    element.attribute = new value;
    element.setAttribute(attribute, value);    

    # 獲取標籤屬性
    element.getAttribute("id"); //返回屬性的值，沒有則返回null

    # 判斷標籤是否含有屬性
    element.hasAttribute("id"); //布爾值；該元素有沒指定屬性

    # 移除指定屬性
    Element.removeAttribute();

# ---補充固定名詞部分---
Element.id          //返回元素的id屬性，可讀寫
Element.tagName     //返回元素的大寫標籤名
Element.innerHTML   //返回元素包含的HTML代碼，可讀寫
Element.outerHTML  //返回元素節點的全部HTML代碼，包括它自身和包含的的全部子元素，可讀寫
Element.className  //返回元素的class屬性，可讀寫
Element.classList  //返回元素節點的全部class集合
Element.dataset    //返回元素節點中全部的data-\*屬性。

7、事件方法

document.createEvent(type)   //生成一個事件對象，該對象能被element.dispatchEvent()方法使用

Element.addEventListener() //添加事件的回調函數 

Element.removeEventListener() //移除事件監聽函數 

Element.dispatchEvent() //觸發事件


//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event對象 
var event = window.event||event; 

// 事件的目標節點 
var target = event.target || event.srcElement;


// 事件代理 
ul.addEventListener('click', function(event) { 
  if (event.target.tagName.toLowerCase() === 'li') { 
    console.log(event.target.innerHTML) 
  }  
});

8、其餘

Node.hasChildNodes()   //布爾值；當前節點是否有子節點

Node.contains(node)    //布爾值；參數節點是否爲當前節點的後代節點

Node.isEqualNode(noe)  //布爾值;用於檢查兩個節點是否相等(兩個節點的類型相同、屬性相同、子節點相同)

Node.cloneNode(true);  //克隆, 默認false(克隆節點), true(克隆節點及其屬性，以及後代)

操做示例

<div id="intro">
    <p>我是1</p><p>我是2</p><p>我是3</p>
</div>
<div class="intro">intro2</div>
<div class="intro">intro3</div>
<img class="myImage" src="aa.jpg">

-------------------查找獲取元素-------------------------
//id
var ele1 = document.getElementById("intro"); //返回對應一個直接用
//class名
var ele2 = document.getElementsByClassName("intro"); //查找全部class等於intro的元素 返回的是數組 
//標籤名
var ele3 = ele1.getElementsByTagName("p"); //查找ele1下全部<p>的元素 返回的是數組 處理第幾個元素須要elem[i]的用 
//選擇器
var ele4 = document.querySelector("div.intro"); //class="intro" 的全部 <p> 元素列表的第一個元素
var ele5 = document.querySelectorAll("div.intro"); //class="intro" 的全部 <p> 元素列表

// 獲取父元素、父節點
var parent = ele3.parentElement;
var parent = ele3.parentNode;

// 獲取子節點，子節點能夠是任何一種節點，能夠經過nodeType來判斷
var nodes = ele.children;    

// 當前元素的第一個/最後一個子元素節點
var el = ele3.firstChild;
var el = ele3.firstElementChild;

var el = ele3.lastChild;
var el = ele3.lastElementChild;

// 下一個/上一個兄弟元素節點
var el = ele3.nextSibling;
var el = ele3.nextElementSibling;

var el = ele3.previousSibling;
var el = ele3.previousElementSibling;

var myTitle = document.getElementById("demo").innerHTML;
//訪問 innerHTML 屬性等同於訪問首個子節點的 nodeValue 也就是第一個子節點
var myTitle = document.getElementById("demo").firstChild.nodeValue;
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

-------------------建立新節點-------------------------
//建立節點
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新建立的節點';
document.body.appendChild(elem);

//建立文本節點
var node = document.createTextNode("我是文本節點");
document.body.appendChild(node);

//建立一個DOM片斷
var flem = document.createDocumentFragment(); 
for(var i=0;i<3;i++){
    (function(){
        var li_temp = document.createElement("LI");
        li_temp.innerHTML = "我是"+i;
        flem.appendChild(li_temp); //先裝載文檔節點裏
})
    })(i)
}
document.getElementById('head_test1').appendChild(flem); //再一次加載在頁面

-----------------------------------------------------

document.getElementById("p2").style.color = "blue";
//獲取修改 innerHTML innerText
var elem = document.getElementById("p1");
console.log(elem.innerHTML);// 獲取dom
elem.innerHTML = "<a style='color:red'>Hello Kitty！</a>"; //修改dom 可識別標籤

console.log(elem.innerText);// 獲取dom的文字
elem.innerText = "Hello Kitty！"; //修改dom 不是識別標籤


document.getElementById("myImage").src = "landscape.jpg";

-----------------------------------------------------
建立一個指定類型的[事件]
// 建立事件
var event = document.createEvent('Event');

// 定義事件名爲'build'.
event.initEvent('build', true, true);

// 監聽事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 觸發對象能夠是任何元素或其餘事件目標
elem.dispatchEvent(event);
-----------------------------------------------------

mark一下 僅供參考 歡迎更正補充 Thanks

---

資料：
javascript文檔:https://www.w3school.com.cn/j...
jquery文檔：https://www.w3school.com.cn/j...
javascript API博客：https://www.cnblogs.com/liuya...
jquery屬性的相關js實現方法