DOM查找與操作（document)_js

一、DOM操作

DOM就是document操作，就是找到對應需要操作的html標簽

二、查找獲取標簽

1、直接查找

document.getElementById  根據標簽id屬性查找

document.getElementsByName  根據標簽的name屬性進行查找

document.getElementsByClassName 根據class屬性進行查找

document.getElementsByTagName  根據標簽名進行查找

2、間接查找

parentElement  父節點標簽

chlidren：所有子標簽

firstElementChild 第一個字標簽

lastElementChild  最后一個子標簽

nextElementSibling  下一個兄弟標簽

previousElementSibling  上一個兄弟標簽

 

 

三、操作標簽

1、文本操作

tag.innerText   操作文本內容

tag.innerHtml  操作內部所有內容

tag.value  操作標簽的value值

2、樣式操作

tag.className="" 直接對整體進行操作

tag.classList  對class的列表操作

　　tag.classList.add('樣式名')  添加樣式

　　tag.classList.remove('樣式名')  刪除樣式

3、style操作

tag.style.fontSize='16px'  直接對style屬性操作

4、屬性操作

tag.setAttribute('屬性名','屬性值')  添加屬性

tag.getAttribute('屬性名')  獲取屬性

tag.removeAttribute('屬性名')  刪除屬性

tag.attributes 獲取所有屬性

 5、創建標簽，並添加到html中

　　兩種創建方式：

　　（1）直接編寫需要添加的標簽的html，然后添加

　　function addEle() {
    　　var tag='<p><input type="text"></p>'
     　　document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)

　　}
　　addEle()
　　注：insertADjacentHTML的第一個參數只能是：beforeBegin、afterBegin、beforeEnd、afterEnd

　　（2）對象方式
　　

　　function addEle2() {
    　　var tag=document.createElement('input')
    　　tag.setAttribute('type','text');
　　　　tag.style.fontSize="16px";
    　　var p=document.createElement('p');
    　　p.appendChild(tag);
    　　document.getElementById('i1').appendChild(p);

　　}
　　addEle2()