DOM 关于dom的
获取元素: getElementById() 返回带有指定ID的元素 getElementsByTagName(); 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组) getElementsByClassName(); 返回包含带有指定类名的所有元素的节点列表。 例如: <p id="box">id为box的p标签</p> <p class="box">class为box的p标签内容1</p> <p class="box">class为box的p标签内容2</p> <p class="box">class为box的p标签内容3</p> var obj=document.getElementById('box').innerText; alert(obj); //弹出的内容:id为box的p标签 var objclass=document.getElementsByClassName('box')[1].innerText; alert(objclass); //弹出的内容:class为box的p标签内容2 var objtag=document.getElementsByTagName('p'); alert(objtag.length); //弹出的内容:所有
方法:
appendChild() 把新的子节点添加到指定节点。
例子:
var createNode=document.createElement("div");
var createTextNode=document.createTextNode("文本内容");
createNode.appendChild(createTextNode);
//document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);
// document.body指向的是<body>元素;document.documentElement则指向<html>元素
removeChild() 删除子节点。
<div id="father">
<div id="child">A child</div>
</div>
var childnode=document.getElementById("child");
document.getElementById("father").removeChild(childnode);
insertBefore() 插入新节点;
<body>
<span id="lovespan">熊掌我所欲也!
</span>
</body>
<script
type="text/javascript">
var lovespan=document.getElementById("lovespan"); //获取id
var newspan=document.createElement("span");
var newspanref=document.body.insertBefore(newspan, lovespan);//在body里 lovespan span前面添加newspan
newspanref.innerHTML="添加前面";
</script>
cloneNode 返回当前节点的拷贝
例子:
<ul id="box">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<script type="text/javascript">
var objbox=document.getElementById('box');
var objclone=objbox.cloneNode(true);
document.body.insertBefore(objclone,objbox);
</script>
createAttribute 创建新的属性