DOM 可以理解成文档(HTML 文档、XML 文档)的编程接口。
DOM 不属于 JavaScript,但是操作 DOM 是JS最常见的任务,而JS也是最常用于 DOM 操作的语言。
删除节点
通过获得parent然后调用removechild来删除本对象节点。
innerHTML 属性
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具有双向功能:获取对象的内容 或 向对象插入内容。
其在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" οnblur="mblur(this)">
</body>
</html>