[持续更新]JavaScript学习笔记（六）

来源：互联网发布：设置铃声的软件编辑：程序博客网时间：2024/06/05 07:58

1.DOM节点操作

文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API

1.选取文档元素

1)document.getElementById()根据id选取元素返回对象

2)document.getElementsByName()根据name选取元素返回NodeList

3)document.getElementsByTagName()根据tag选取元素返回HTMLCollection

4)document.getElementsByClassName()根据class选取元素返回HTMLCollection

5)document.all[]

<!DOCTYPE html><head><meta charset="uft-8"><title>coding.....</title></head><body><div id="div1"></div><h1>h1</h1><h1>h1</h1><form name="form1"></form><form name="form1"></form><h1 class="red">h1</h1><h1 style="color:red">h1</h1><script type="text/javascript">var getId = document.getElementById("div1");var getTag = document.getElementsByTagName("h1");var getName = document.getElementsByName("form1");var getClass = document.getElementsByClassName("red");var getDocumentAll = document.all["div1"];</script></body></html>

运行结果在firebug

可见通过不同方法获取的对象类型是不同的使用的时候要注意

至于HTMLCollection和NodeList的区别请参考博客

http://blog.csdn.net/hztgcl1986/article/details/9112435

2.文档结构和和历

Document对象element对象和text对象都是node对象（他大舅他二舅都是他舅）node有以下属性

1)parentNode节点的父节点

2)childNodes节点的子对象类数组NodeList对象

3)firstChild,lastChild节点子节点的第一个最后一个对象（null）

4)nextSibling,reviousSibling该节点的下一个上一个兄弟节点

5)nodeType节点类型

元素节点

节点类型取值（nodeType）

元素element

属性attr

文本text

注释comments

文档document

6)nodeValue 节点text或comment节点的文本内容

7)nameNode元素的标签名以大写形式表示

3.作为元素树的文档

蒋经理主要集中在文档的元素上而不是他们之间的文本上，该API的第一部分是Element对象的children属性。类似childNodes，它也是一个NodeList对象。但不同的是children列表只包含Element对象。Children属性并非标准属性，注意不同浏览器的使用。

该API的第二部分是element属性，后者类似node对象的子属性和兄弟属性：

firstElementChild,lastElementChild

nextElementSibling,previousElementSibling

childElemenetCount子元素的数量

4.innerHTML&&outerHTML

例如代码

<div id="div1">this is content</div>

innerHTML输出this is content

outerHTML则输出<div id="div1">this is content</div>

但是要注意outerHTML的兼容问题

还有个类似的东西textContent

举个例子

<h1 id="test1">test1</h1><h1 class="test2">test2</h1><script type="text/javascript">var test1 = document.getElementById("test1");test1.innerHTML = "this is text in <i>test1</i>";var test2 = document.getElementsByTagName("test2")[0];test2.textContext = "this is text in <i>test1</i>";</script>

输出结果

textContent操作的是纯文本元素内容，不必转译HTML标记中使用的尖括号和&符号。

5.创建插入删除节点

创建节点

1)document.createElement();创建Element节点

2)document.createTextNode();创建Text节点

插入节点

1)element.appendChild()插入指定节点使之成为那个节点的最后一个子节点。

2)parentElement.insertBefore(newElement,targetElement)获取到父节点（parentElement），将newElement插入到targetElement之前。

删除替换节点

1)n.parentNode.removeChild(n);此方法需要在其父节点上调用

2)n.parentNode.replace(newElement,n)此方法需要在其父节点上调用

看一个综合的例子:

<!DOCTYPE html><head><meta charset="uft-8"><title>coding.....</title></head><body><div id="box1"></div><div id="box2"></div><div id="box3"><ul id="parent1"><li>No.1</li><li>No.2</li><li id="target1">No.3</li></ul></div><div id="box4"><ul><li>No.1</li><li>No.2</li><li id="target2">No.3</li><li>No.4</li></ul></div><div id="box5"><ul><li>No.1</li><li>No.2</li><li id="target3">No.3</li><li>No.4</li></ul></div><script type="text/javascript">//创建文本节点var text = document.createTextNode("This is a <i>text</i>");var box1 = document.getElementById("box1");box1.appendChild(text);//创建节点var element = document.createElement("h1");var box2 = document.getElementById("box2");element.innerHTML = text.nodeValue;box2.appendChild(element);//目标节点前插入var li = document.createElement("li");li.innerHTML = "new No.4";var parent1 = document.getElementById("parent1");var target1 = document.getElementById("target1");parent1.insertBefore(li, target1);//删除目标节点var target2 = document.getElementById("target2");target2.parentNode.removeChild(target2);//替换目标节点var li1 = document.createElement("li");li1.innerHTML = "new No.3";var target3 = document.getElementById("target3");target3.parentNode.replaceChild(li1, target3);</script></body></html>

显示效果

0 0