AJAX学习(二)-------DOM基础(3)-CSDN博客

本文链接：https://blog.csdn.net/tzd_java/article/details/2198428

重要的DOM属性(续)

1.firstChild和lastChild

第一个和最后一个孩子节点。

node.firstChild等价于node.childNodes[0]，

node.lastChild等价于 node.childNodes[node.childNodes.length – 1]

2.parentNode

返回元素的父节点

3.nextSibling

返回下一个兄弟节点

写个实例:

打开程序，分别输出第一个节点，最后一个节点及第一个节点的兄弟节点的名称，但在IE及mozilla浏览器里显示却是不同的，因为IE忽略了换行，而mozilla没有，为了避免这个问题，我们可以通过修改程序来解决此问题。将代码改成如下格式:

<form name="testfm"
><input id="id1" type="text" name="testinput1" value="1" /><br
><input id="id2" type="text" name="testinput1" value="2" /><br
><input id="id3" type="text" name="testinput1" value="3" /><br
><input id="id4" type="text" name="testinput1" value="4" /><br
></form>

这样IE和Mozilla即可以显示一致了！

改变网页结构的DOM方法

createElement(tagname)
创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连。
appendChild(node)
把新建的节点插入到节点树的某个节点下，成为这个节点的子节点。
createTextNode(text)
创建文本节点
insertBefore(new_node, old_node)
把一个新元素插入到一个现有元素的前面
replaceChild(new_child, old_child)
替换一个孩子节点
removeChild(node)
删除一个孩子节点

<html>

<head>

<title>DOM study</title>

function init(){

var p = document.getElementById("content");

var newP = document.createElement("p");

var txt = document.createTextNode("insert content");

newP.appendChild(txt);

p.parentNode.appendChild(newP); //把新内容加到最后面

/*也可以这样写: document.getElementsByTagName("body")[0].appendChild(newP)*/

p.parentNode.replaceChild(newP,p); //用新内容把p内容换掉

            /* 也可以这样写:
            p.parentNode.insertBefore(newP,p);
            p.parentNode.removeChild(p);
            */

}
window.οnlοad=init;

</script>

</head>

    <body>
        <form name="testfm"
            ><input id="id1" type="text" name="testinput1" value="1" /><br
            ><input id="id2" type="text" name="testinput1" value="2" /><br
            ><input id="id3" type="text" name="testinput1" value="3" /><br
            ><input id="id4" type="text" name="testinput1" value="4" /><br
        ></form>

        <p id="content"> content here!</p>

</body>

</html>

我们看到了dom方法有insertBefore()方法!下面自己动手写一个insertAfter方法，练练手！