今天学习了DOM(文档对象模型),以下是相关笔记:
比如,在HTML页面中有这样一行代码
<div id="a">淘宝</div>
节点分为三种:
1.标签节点 (比如 div)
2.文本节点 (比如 淘宝)
3.属性节点 (a)
需要把getElementById()写到html文件的最后面,或者可用onLoad 事件,具体如下:
window.οnlοad=function(){
alert(window.document.getElementById('a'));
};
alert(a.tagName); //获取元素节点的标签名
alert(a.innerHTML); //获取元素节点里的文本
下面用到的HTML页面的代码如下:
<div class="testclass" id="box" style="color:olive; font-size:24px;">
<p>淘宝官网</p>
<p>百度一下</p>
<p>新浪微博</p>
</div>
<span>ends</span>
var box=window.document.getElementById('testId');
alert(box.childNodes.length); // 第一个节点所有浏览器均认为是空白内容#text
alert(removeWhiteNode(box).childNodes.length);
//移除空白节点 //这里的函数竟让没用
function removeWhiteNode(node){
for(var i=0;i<node.childNodes.length;i++){
if(node.childNodes[i].nodeType===3 &&/^s+$/.test(node.childNodes[i].nodeValue)){
node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
}
}
return node;
}
document.write('<p>woyaotianjiede</p>');//之前的会被覆盖掉
box.appendChild(p);
var test=document.createTextNode('hushuode');
//p.appendChild(test); //这里是三种添加方式
//box.appendChild(test);
//document.getElementByTagName('body')[0].appendChild(p);
//在div 之后span之前添加
box.parentNode.insertBefore(p,box);
insertAfter(p,box);
function insertAfter(newElement,targtElement){
var parent=targtElement.parentNode;
parent.insertBefore(newElement,targtElement.nextSibling);
// parent.appendChild(newElement,targtElement);
}
添加单选框
var bo=document.getElementsByTagName('body')[0];
var input=document.createElement('input');
input.setAttribute('type','radio');
bo.appendChild(input);