首页 > 语言 > JavaScript > 正文

整理JavaScript对DOM中各种类型的元素的常用操作

2024-05-06 14:58:47
字体:
来源:转载
供稿:网友

节点类型
nodeType
以下是一些重要的nodeType的取值:
1: 元素element
2: 属性attr
3: 文本text
8: 注释comments
9: 文档document

nodeName,nodeValue

节点关系
childNodes: 每个节点都有一个childNodes属性,其中保存着一个NodeList对象

firstChild: 等同于childNodes[0]

lastChild: 等同于childNodes.length-1

同时通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。

操作节点
appendChild()

appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后,childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。

insertBefore()
insertBefore()这个方法接受两个参数:要插入的节点和作为参照的节点。

// 插入后成为最后一个子节点returnedNode = someNode.insertBefore(newNode,null);// 插入后成为第一个节点returnedNode = someNode.insertBefore(newNode,someNode.firstChild);// 插入到最后一个子节点前面returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

repaceChild()
repaceChild()接受两个参数,要插入的节点和要替换的节点

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

removeChild()
只移除而非替换节点。

var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

item 1
item 2
item 3

var deepList = myList.cloneNode(true);console.log(deepList.length); // 3var shallowList = myList.cloneNode(false);console.log(shallowList.childNodes.length); //0

Document类型

Document节点具有下列特征:

nodeType的值为9; nodeName的值为#document; nodeValue的值为null; parentNode的值为null; ownerDocument的值为null;

文档的子节点

var html = document.documentElement; // 取得对<html>的引用console.log(html === document.childNodes[0]); // trueconsole.log(html === document.firstChild); // true

文档信息

// 取得文档的标题var originalTitle = document.title; // 设置文档标题document.title = "New page title";// 取得完整的urlvar url = document.URL;// 取得域名var domain = document.domain;// 取得来源页面的urlvar referrer = document.referrer;//假设页面来自p2p.wrox.com域document.domain = "wrox.com"; // 成功document.domain = "nczonline.net"; // 失败

在IE7中调用document.getElementById("myElement");结果会返回<input>元素,如下所示;
最好的办法是不让表单字段的name特性与其他元素的ID相同。

<input type="text" name="myElement" value="text field"><div id="myElement">a div</div>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选