查
<div>
123
<p></p>
<a href=""></a>
<strong></strong>
</div>
1.查看元素节点
(1)document.getElementsByTagName();
(2)document.getElementById();
只有部分标签name可生效(表单,表单元素,img,iframe)
(3)document.getElementsByName();
(4)document.getElementsByClassName();
参数是CSS选择器
(5)document.querySelector();
(6)document.querySelectorAll();
2.通过nodeType查看节点类型
var div = document.getElementsByTagName('div')[0];
console.log(div.nodeType);//1
console.log(div.nodeName);//DIV
div.hasChildNodes();//true
3.遍历节点
var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
// 遍历节点
console.log(p.parentNode);//父节点
console.log(div.childNodes);//子节点
console.log(div.firstChild);//第一个子节点
console.log(div.lastChild);//最后一个子节点
console.log(p.nextSibling);//下一个兄弟节点
console.log(p.previousSibling);//前一个兄弟节点
// 遍历元素节点
console.log(p.parentElement);//父元素节点
console.log(div.children);//子元素节点
console.log(div.children.length);
console.log(div.firstElementChild);//第一个子元素节点
console.log(div.lastElementChild);//最后一个子元素节点
console.log(p.nextElementSibling);//下一个兄弟元素节点
console.log(p.previousElementSibling);//前一个兄弟元素节点
增、删、插、替换
var div = document.createElement('div');
var div2 = document.createElement('div');
var text = document.createTextNode('sadas');
var comment = document.createComment('这是一行注释')
document.body.appendChild(div2);
document.body.appendChild(div);
div.appendChild(text);
div2.innerHTML='<span>asds</span>';
div.setAttribute('class','name');
//insertBefore(插入的元素,目标元素)
//replaceChild(new,origin)
//div.remove()//删