JavaScript操作DOM

来源：互联网发布：淘宝健客大药房旗舰店编辑：程序博客网时间：2024/06/05 10:25

DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。
DOM 不属于 JavaScript，但是操作 DOM 是JS最常见的任务，而JS也是最常用于 DOM 操作的语言。

获取节点

以tagid获取

document.getElementById("my_div").style.height="100px";

以tagname获取

document.getElementsByTagName("input")[0].value="hello";   // 下标为 [0] 表示选取第 1 个 input 标签document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签

设置节点

document.getElementById("div_1").setAttribute("class","class_2");

添加节点

JS动态创建元素只能用变量.style.XXX 的形式。而不能用诸如变量.style="XXX:yyy"。
先createelement然后将其插入为parent的子对象节点。

function addlast(){idnum++;console.log(idstr+idnum);var mydiv=document.createElement("div");mydiv.id=idstr+idnum;mydiv.style.height="100px";mydiv.style.background="red";document.getElementsByTagName("body")[0].appendChild(mydiv);}

删除节点

通过获得parent然后调用removechild来删除本对象节点。

function removelast(){var obj=document.getElementById(idstr+idnum);obj.parentNode.removeChild(obj);if(idnum>=1)idnum--;console.log(idstr+idnum);}

innerHTML 属性

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
其在JS具有双向功能：获取对象的内容或向对象插入内容。

<div id="aa">这是内容</div>

var tmp=document.getElementById('aa').innerHTML;document.getElementById('aa').innerHTML=‘xxx’;

HTML对象作为参数传入JS函数

<html><head><script>function mblur(obb){    if(obb.value == "")        alert('input cannot be empty');}</script></head><body>please input:<input id="aa" type="text" onblur="mblur(this)"></body></html>

阅读全文

0 0