JavsScript中DOM的基本操作

最新推荐文章于 2024-11-13 17:27:29 发布

weixin_33775572

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mabaoqing/p/10624979.html

版权

节点及其类型

元素节点
属性节点: 元素的属性, 可以直接通过属性的方式来操作.
文本节点: 是元素节点的子节点, 其内容为文本.

在 html 文档的什么位置编写 js 代码

直接在 html 页面中书写代码， js 和 html 强耦合, 不利用代码的维护
一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
在整个 html 文档的最后编写类似代码，有利于页面的加载

window.onload = function(){};

获取元素节点

document.getElementById: 根据 id 属性获取对应的单个节点
document.getElementsByTagName：根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
document.getElementsByName：

根据节点的 name 属性获取符合条件的节点数组，但 ie 的实现方式和 W3C 标准有差别：
- 在 html 文档中若某节点(li)没有 name 属性，则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

获取属性节点

可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值

获取元素的子节点

childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
firstChild 属性获取第一个子节点
lastChild 属性获取最后一个子节点

获取文本节点

步骤: 元素节点 --> 获取元素节点的子节点
若元素节点只有文本节点一个子节点, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

节点的属性

nodeName：代表当前节点的名字。只读属性，如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
nodeValue：返回给定节点的当前值(字符串). 可读写的属性
- 元素节点, 返回值是 null.
- 属性节点: 返回值是这个属性的值
- 文本节点: 返回值是这个文本节点的内容

创建一个元素节点

1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.

方法的返回值：是一个指向新建元素节点的引用指针.

新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

创建一个文本节点

createTextNode()

返回值是一个指向新建文本节点引用指针.
方法只有一个参数：新建文本节点所包含的文本字符串.
新元素节点不会自动添加到文档里

为元素节点添加子节点

appendChild(), 方法的返回值是一个指向新增子节点的引用指针.
直接用innerHTML属性也行

节点的替换

replaceChild(newChild,oldChild)：
- 把一个给定父元素里的一个子节点替换为另外一个子节点
- 返回值是一个指向已被替换的那个子节点的引用指针
该节点除了替换功能以外还有移动的功能.
该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

function replaceEach(aNode, bNode){
    if(aNode == bNode){
    return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
    var bParentNode = bNode.parentNode;
}
//若 bNode 有父节点
if(bParentNode){
    var tempNode = aNode.cloneNode(true);
    bParentNode.replaceChild(tempNode, bNode);
    aParentNode.replaceChild(bNode, aNode);
}

插入节点

insertBefore(newNode,targetNode)：
- 把一个给定节点插入到一个给定元素节点的给定子节点的前面
- 节点 targetNode 必须是 element 元素的一个子节点
- 该方法同时含有移动的功能。
自定义 insertAfter() 方法（将 newChild 插入到 refChild 的后边）

function insertAfter(newChild, refChild){
    var refParentNode = refChild.parentNode;
    //判断 refChild 是否存在父节点
    if(refParentNode){
        //判断 refChild 节点是否为其父节点的最后一个子节点
        if(refChild == refParentNode.lastChild){
            refParentNode.appendChild(newChild);
        }else{
            // 下一个兄弟节点
            refParentNode.insertBefore(newChild, refChild.nextSibling);     
        }
    }
}