【学习干货分享】JavaScript学习笔记（二）

DOM

Document Object Model：文档对象模型 定义了访问和处理 HTML 文档的标准方法。是W3C国际组织制定的统一标准，在很多计算机语言中都有不同实现如C#、PHP、Java、Ruby、perl、python等

DOM树

上下为父子关系

左右为兄弟关系

节点

节点的概念来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。 相应的，我们可以说HTML文档是由DOM节点构成的集合

节点的分类

元素节点：构成HTML文档最基本的HTML元素，对应HTML文档中的HTML标签

属性节点：对应元素的属性

文本节点：对应HTML标签内的文本内容

节点的属性

nodeName: 代表当前节点的名字，只读属性。如果给定节点是一个文本节点， nodeName 属性将返回内容为 #text 的字符串

nodeType：返回一个整数， 这个数值代表着给定节点的类型。 只读属性. 1 — 元素节点， 2 — 属性节点， 3 — 文本节点

nodeValue：返回给定节点的当前值（字符串）。 可读写的属性

元素节点， 返回值是 null

属性节点： 返回值是这个属性的值

文本节点： 返回值是这个文本节点的内容

获取元素节点

根据 id 属性值获取：调用 document 对象的 getElementById（元素的id属性），返回的是当前元素节点的引用

根据标签名，获取元素节点

调用 document 对象的 getElementsByTagName（标签名），返回的是标签名对应的元素节点的数组

也可以通过一个元素节点来调用 getElementsByTagName（标签名）方法

根据 name 属性值获取一组元素节点

通过调用 document 对象的 getElementsByName（元素的 name 属性值） 方法，返回的是一个元素的数组

如果 HTML 标签本身没有 name 属性，这时通过 getElementsByName（） 方法获取元素节点

IE 获取不到

严格遵守W3C标准的浏览器可以获取到

操作属性

推荐方法

读：element.attrName

写：element.attrName=”new value”；

经典方法

获取属性节点对象：element.getAttributeNode（属性名） 返回一个属性节点对象的引用

读取值：attrNode.nodeValue

修改值：attrNode.nodeValue = ” new value”

获取元素节点的子节点

查看元素节点是否存在子节点：hasChildNodes（）。只有元素节点才可能有子节点

通过childNodes 属性获取全部子节点。IE和W3C的标准有区别：IE忽略空格（空行），W3C标准会把空格也当作子节点

通过 firstChild 属性获取元素节点的第一个子节点。该方法经常被用来获取文本节点如：元素节点对象.firstChild。如果要获取文本值：元素节点对象.firstChild.nodeValue

调用父节点的getElementsByTagName()，更有针对性

节点的属性

属性节点的 nodeValue 是它的属性值

文本节点的 nodeValue 是它的文本值

获取文本节点的文本值的方法：文本节点的父节点.firstChild.nodeValue

创建节点

注意：新创建的节点，包括文本节点和元素节点，都不会自动加入到当前的文档中

的

创建文本节点 document.createTextNode(文本值) 方法，返回一个文本节点的引用var textNode = document.createTextNode(“广州”);

创建元素节点 document.createElement(标签名) 方法，返回一个新的元素节点的引用var liEle = document.createElement(“li”);

将新创建的文本节点，添加到元素节点当中 元素节点.appendChild(文本节点)
liEle.appendChild(textNode);
alert(liEle·firstChild·nodeValue);
var cityEle = document.getElementById(“city”);

将新创建的元素节点，添加到文档中 指定的元素节点.appendChild(新创建的元素节点)
cityEle.appendChild(liEle);

替换节点

调用 父节点.replaceChild(新节点,目标节点) 方法，实现节点的替换

获取元素节点的父节点：子节点.parentNode

复制节点：原元素节点.cloneNode(true) 参数为布尔值：true 包括子节点都复制，false 只复制当前节点（默认）

插入节点

将新创建的元素节点，添加到文档中指定元素节点前面

父节点.insertBefore(新节点,目标节点);

自定义inserAfter()函数

function insertAfter(newNode,targetNode){

//将一个新节点，添加到目标节点的后面

var parentNode = targetNode.parentNode;

//判断目标节点是否为最后一个子节点

if(targetNode == parentNode·lastChild){

//如果是，调父节点的appendChild

parentNode.appendChild(newNode);

}else{

//如果不是，获取它后面的兄弟节点 targetNode.nextSibling

var sibling = targetNode.nextSibling;

//调用父节点的insertBefore方法，以sibling为新的目标节点

parentNode.insertBefore(newNode,sibling);

删除节点 元素节点.removeChild(要删除的子节点)

innerHTML 属性可读可写。读：读出指定元素节点内的 HTML 代码，写：将 HTML 代码写入指定元素节点的开始和结束标签内

nextSibling:元素节点.nextSibling返回元素节点的下一个兄弟元素

previousSibling：元素节点.previousSibling返回元素节点的上一个兄弟元素

关注我有更多java开发技术知识分享！

文章转载链接：http://www.atguigu.com/jsfx/1370.html