<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>操作DOM对象</title></head><body><div id = "father"><h1>标题1</h1><p id ="p1">我是p1</p><p class ="p2">我是p2</p></div><script>'use strict';//获取dom节点var hh1= document.getElementsByTagName("h1");//通过标签名var pp1= document.getElementById('p1');//idvar pp2=document.getElementsByClassName('p2');//类名var father1 = document.getElementById('father');//获取父亲节点var children = father1.children;//所有孩子节点var child1 =father1.firstChild;//第一个孩子var child2 =father1.lastChild;//最后一个孩子//创建dom节点//JavaScript新建一个节点var newelmNode = document.createElement('p');//创建元素节点var newtextNode = document.createTextNode('text1');var newclassNode =document.createAttribute('class');//修改dom节点newelmNode.id='#newp1';newelmNode.innerText='innerText只返回文本值';newelmNode.innerHTML='<strong>新节点：Html返回文本值和解析HTML代码</strong>';newelmNode.style.fontSize='20px';//驼峰命名替代-newelmNode.style.color='green';newelmNode.style.padding='2em';//2输入属性名，获取元素属性名对应的属性值newelmNode.getAttribute('id');//3或者用setAttribute来直接设置属性名，值newelmNode.setAttribute('class','pclass1');//末尾追加father1.appendChild(newelmNode);//注意传入参数为之前定义的节点名，不是字符串不要加''//==== document.getElementById('father').appendChild(newp);//子元素之前插入document.getElementById('father').insertBefore(newelmNode,pp1);//参数1：新节点名，参数2：父元素中已存在的节点名//2种同时插入相同元素只会执行后面的，前面的插入会被覆盖//删除dom节点/*先获取父节点，再通过父节点删除自己var son2 = document.getElementsByClassName('p2');//获取儿子var father2 = son2.parentElement;//获取父亲节点father2.removeChild(son2);此方法报错Uncaught TypeError: Cannot read property 'removeChild' of undefined*/father1.removeChild(father1.lastElementChild);//正确/*注意删除是一个动态过程，数组下标会随着删除变化father2.removeChild(father2.children[0]);father2.removeChild(father2.children[1]);father2.removeChild(father2.children[2]);*/</script></body></html>
