{Dom}

2016-12-29  本文已影响13人  jrg_memo

Dom

document 对象

Element对象

<div id="demo"> 
    <p id="p1">hello world  <span>123</span></p> 
    <p class="p2"> 饥人谷</p>
</div>

var parent = document.getElementById('d1'); 
var p1 =  document.getElementById('p1'); 
var p2 =  document.getElementsByClassName('p2') 

属性:
console.log(p1.innerText);// hello world 123
console.log(p1.innerHTML);// <p id="p1">......</p> 

查询: 
console.log(document.getElementById('p1'));//<p id="p1">hello ...</p>   
console.log(document.getElementsByClassName('p2')); //HTMLCollection[1]
console.log(document.getElementsByTagName('p')); //HTMLCollection[2]
console.log(document.querySelector('span')); // <span>123</span>
console.log(document.querySelectorAll('demo')); // NodeList[0]

console.log(demo.childNodes); //  NodeList[5]
console.log(demo.firstChild); // #text
console.log(demo.lastChild); // #text

console.log(p1.nextSibling); // #text
console.log(p1.parentNode); // <div id="demo">...</div>
   
创建:
document.creatElement('p');--------->创建元素p   
var  txt = document.createTextNode('apple');--------->创建文本apple,并赋给txt 
var  txt2 = document.createTextNode('pen'); --------->创建文本pen,并赋给txt2
增加:
demo.appendChild(txt); ------------------->把apple添加到div末尾
修改:
demo.insertBefore(txt,p1); ------------------->把apple插入.p1之前
demo.replaceChild(txt2,txt); ------------------->用pen替换apple
删除:
demo.removeChild(p1);------------------->删除<p id="p1"> ...</p>  

tip:

HTMLCollection VS. NodeList

上一篇 下一篇

猜你喜欢

热点阅读