文章目录
操作DOM对象重点
浏览器网页就是一个DOM树
更新:更新DOM节点
遍历:得到DOM节点
删除:删除DOM节点
添加:添加新节点
获得DOM节点
</head>
<body>
<div id="d1">
<h1>标题1</h1>
<p id="p1">p标签</p>
<p class="p2">p标签</p>
</div>
<script type="text/javascript">
var d1 = document.getElementById('d1');//Id
var p2 = document.getElementsByClassName('p2');//ClassName
var h1 = document.getElementsByTagName('h1');//TagName
</script>
</body>
操作文本
d1.innerText='111';//修改文本的值
>"111"
d1.innerHTML='<p style="color: red">haha</p>';//可以解析html标签
>haha
操作css
d1.style.color='red';
d1.style.border='1px solid black';
d1.style.fontSize='30px';
删除节点
<script type="text/javascript">
var fa = document.getElementById("d1");
var c1 = document.getElementsByTagName('h1');
var c2 = document.getElementById('p1');
var c3 = document.getElementsByClassName('p2');
fa.removeChild(c2);//方法一
fa.removeChild(fa.children[0]);//方法二 注意节点的下标动态更新
</script>
追加节点 append()
已有标签进行追加
<body>
<p id="r">red</p>
<div id="d">
<p id="y">yellow</p>
<p id="p">purple</p>
</div>
<script type="text/javascript">
var r = document.getElementById('r');
var d = document.getElementById('d');
d.appendChild(r);
</script>
</body>
创建标签进行追加
<script type="text/javascript">
var newE = document.createElement('p');
newE.id = 'new';//newE.setAttribute('id','new');
newE.innerText = 'brown';
var d = document.getElementById('d');
d.appendChild(newE);
</script>
insert
<body>
<div id="d">
<p id="y">yellow</p>
<p id="p">purple</p>
</div>
<script type="text/javascript">
var newE = document.createElement('p');
newE.setAttribute('id','new');
newE.innerText='grey';
var pu = document.getElementById('p');
var d = document.getElementById('d');
d.insertBefore(newE,pu);//insertBefore(newNode,targetNode)
</script>
</body>
如有不对的地方欢迎大家指出，共同进步！