Dom对象

NodeList

文档中每个节点都有一个childNodes属性，其中保存着一个NodeList对象，它是一种类数组对象，可以通过位置来访问这些节点，但它不是Array的实例，并且DOM结果的变化能够自动反应在NodeList对象中，所以它是自动变化的。

<div id="div1" class="triangle">

        <p>内部文字1</p>

        <p>内部文字2</p>

</div>

 

window.onload = function () {

            var div = document.getElementById("div1");

            var fistChild = div.childNodes[0]; //获取第一个节点

            var secondChild = div.childNodes.item(1); //获取第二个节点

            var count = div.childNodes.length; //获取节点数，注意只是获取执行的这一时刻。

 

            var arrayOfNodex = Array.prototype.slice.call(div.childNodes, 0);//将nodeList对象转换为数组

            alert(div.firstChild === div.childNodes[0]); //true  lastChild同理

            alert(div.nextSibling); //下一个节点

            alert(div.previousSibling);//上一个节点

        }

上述代码的firstChild其实不是第一个P标签的对象，还需注意的是，JS代码需要写在onload方法中，否则会导致页面元素未加载完成就执行JS语句，造成错误。

这种方法在IE浏览器是没有问题的，但是在谷歌或火狐下可能会把TEXT_NODE类型的节点也获取到，所以可以使用下面的节点避免这种问题。

var childnodelist = document.getElementById("div1").getElementsByTagName("p");

appendChild()方法

在对象末尾处添加一个节点，如果是新的节点那么会加到末尾处，如果添加的节点已经在对象内部了，那么会把该节点移动到对象的最下方。

window.onload = function () {

            var div = document.getElementById("div1");

            var fistChild = div.childNodes[0]; //获取第一个节点

            alert(fistChild.innerText);//undifend

            div.appendChild(fistChild); //已经存在，移动节点

            var fistChild1 = div.childNodes[0]; //重新获取节点

            alert(fistChild1.innerText);//内部文字1

        }

insertBefore()方法

把节点放到childNodes列表中的某个特定位置上，可以使用这个方法，需要两个参数，第一个是要插入的节点，第二个是作为参照的节点，也就是要插入的节点会被插入到参照的节点之前。如果参照的节点为null则插入到最会一个位置，和appendChild方法一样。返回值是新插入的节点对象。

var returnNode = div.insertBefore(secondChild, fistChild);//插入到第一个节点之前

var returnNode = div.insertBefore(secondChild, div.childNodes.length - 2); //插入到倒数第二个节点之前。

replcaceChild()方法

替换节点，同样接收两个参数，要插入的节点，和被替换的节点。返回被替换的节点。

var returnNode = div.replaceChild(fistChild, secondChild); //把第一个节点替换为第二个节点

removeChild()方法

删除某个节点，返回被删除的节点。

var returnNode = div.removeChild(secondChild); //删除第二个节点

cloneNode()方法

创建节点的副本，需要注意的是里面传入参数是个布尔值，为true时，是深度复制，也就是说会复制它的父节点和子节点，传入false时，为浅复制，只复制当前的节点，不会对父节点和子节点进行复制。

    <ul id="ul1">

        <li>1</li>

        <li>2</li>

        <li>3</li>

</ul>

 

var ul = document.getElementById("ul1");

var deepList = ul.cloneNode(true); //深度复制

var shallowList = ul.cloneNode(false); //浅复制

alert(deepList.childNodes.length); //3 或 7

alert(shallowList.childNodes.length); //0

所以上面的代码浅复制的对象子节点的长度会是0。

Document类型

var body = document.body; //获取页面body元素

var title = document.title;//获取页面标题

document.title = "新标题"; //为页面设置新的标题

var url = document.URL;//获取当前页面的url

var referrer = document.referrer;//获取来源页面的url

var domain = document.domain; //获取域名 是可设置的 但不能设置为不同的域

getElementsByTagName方法

<input type="text" name="t1" value="t1" />

    <input type="text" name="t2" value="t2" />

    <input type="text" name="t3" value="t3" />

<input type="text" name="t4" value="t4" />

 

var text = document.getElementsByTagName("input");

var t1 = text.namedItem("t1");

alert(t1.value);  //t1

通过namedItem方法，传入标签的name值，获取在HTMLCollection集合中的某项元素。

也可以通过大括号的方式直接访问某个name的元素，如：

var text = document.getElementsByTagName("input");

var t1= text["t1"]

alert(t1.value);

特殊集合

document.anchors //返回文档中所有带name特性的a元素

document.forms; //返回文档中所有的form元素

document.images //返回文档中所有image元素

document.links;//返回文档中所有带href的a元素

文档写入

下面这两个方法会将aa写入到页面中，并且会删除之前页面中的元素。也可在双引号中拼接html代码或js代码。

document.write("aa");

document.writeln("aa");