Java-操作DOM对象

DOM 是 W3C（万维网联盟）的标准；DOM 定义了访问 HTML 和 XML 文档的标准
在 HTML DOM 中，所有事物都是节点；DOM 是被视为节点树的 HTML

访问节点

使用getElement系列方法访问指定节点：
ugetElementById()
ugetElementsByName()
ugetElementsByTagName()

节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

操作节点

操作节点属性

getAttribute(" 属性名") //获得节点属性
setAttribute(" 属性名"," 属性值")//设置节点属性

创建和插入节点

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

例题

<p>你最喜欢的球星</p>
    <input type="radio" name="book" onclick="book()">韦德
    <input type="radio" name="book" onclick="book()">科比
<div></div>
<script>
    function book() {
        var books = document.getElementsByName("book"); /*获取节点信息*/
        var byname =document.getElementsByTagName("div")[0];
        if(books[0].checked){   
            var img = document.createElement("img");  /*动态创建一个节点*/
            img.setAttribute("src","1.jpg");  /*需要给节点设置属性*/           
             byname.appendChild(img);   /*给节点安排位置*/
         }else if(books[1].checked){
            var img = document.createElement("img");
            img.setAttribute("src","2.jpg");
            byname.appendChild(img);
        }
    }
</script>

删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

<ul>
    <li>
        <img src="1.jpg" alt="韦德" id="one">
        <input type="button" value="删除" onclick="del()">
    </li>
    <li>
        <img src="2.jpg" alt="科比" id="two">
        <input type="button" value="替换" onclick="rep()">
    </li>
</ul>
<script>
    function del() {
        var one = document.getElementById("one");
        one.parentNode.removeChild(one);
    }
    function rep() {
        var two = document.getElementById("two");
        var img = document.createElement("img");
        img.setAttribute("src","1.jpg");
        two.parentNode.replaceChild(img,two);
    }
</script>