JavaScript中DOM的一些基本操作

查

	<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()//删