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


Posted in Javascript onMay 05, 2016

节点类型
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); // 3

var 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]); // true
console.log(html === document.firstChild); // true

文档信息

// 取得文档的标题
var originalTitle = document.title; 

// 设置文档标题
document.title = "New page title";

// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得来源页面的url
var 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>

特殊集合

  • document.anchors,包含文档中所有带name特性的a元素;
  • document.forms, 包含文档中所有form元素,与document.getElementsByTagName("form")得到的结果相同;
  • document.images,包含文档中所有的img元素,与document.getElementsByTagName("img")得到的结果相同;
  • document.links,包含文档中所有带href特性的a元素;

文档写入

<html>
<head>
   <title>document.write() Example 3</title>
</head>
<body>
   <script type="text/javascript">
     document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>");
   </script>
</body>
</html>

字符串<\/script>不会被当作外部script标签的关闭标签,因而页面中也就不会出现多余的内容了。

Element类型
Element节点具有以下特征:

  • nodeType的值为1;
  • nodeName的值为元素的标签名;
  • nodeValue的值为null;
  • parentNode可能是Document或Element;

要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性;

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV


if (element.tagName=="div") { // 不能这样比较,很容易出错
}

if (element.tagName.toLowerCase =="div") { // 这样最好(适用于任何文档)
}

取得特性
操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()、removeAttribute();
注意,传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值,应该传入"class"而不是"className"。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

创建元素
使用document.createElement()方法可以创建新元素。

元素的子节点
在执行某项操作以前,通常都要先检查一下nodeType属性,如下面的例子所示:

for (var i=0; len = element.childNodes.length; i<len; i++){
  if (element.childNodes[i].nodeType ==1) {
    // 执行某些操作
  }
}

Text类型
Text节点具有以下特征:

  • nodeType的值为3;
  • nodeName的值为"#text";
  • nodeValue的值为节点所包含的文本;
  • parentNode是一个Element;

创建文本节点
可以使用document.createTextNode()创建新文本节点。

规范化文本节点
normalize()

分割文本节点
splitText()

Comment类型
comment节点具有下列特征:

  • nodeType的值为8;
  • nodeName的值为"#comment";
  • nodeValue的值是注释的内容;
  • parentNode可能是Document或Element;
  • 不支持(没有)子几点;

DOM操作技术
操作表格

// 创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));


// 创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

document.body.appendChild(table);

选择符API
querySelector()方法

// 取得body元素
var tbody = document.querySelector('body');

// 取得ID为"myDIV"的元素
var myDIV = document.querySelector("#myDiv");

// 取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");

// 取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");

querySelectorAll()方法

// 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");

// 取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");

// 取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

HTML5
与类相关的扩充
getElementsByClassName()方法:
该方法可以通过document对象及所有HTML元素调用该方法。

// 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

// 取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

焦点管理

HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性,这个属性始终会引用DOM中当前获得了焦点的元素。

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); // true

默认情况下,文档刚刚加载完成时,document.activeElement中保存的是document.body元素的引用。文档加载期间,docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法,这个方法用于确定文档是否获得了焦点。

var button = document.getElementById("myButton");
botton.focus();
alert(document.hasFocus()); // true
Javascript 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
vue观察模式浅析
Sep 25 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 #Javascript
深入理解js promise chain
May 05 #Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 #Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 #Javascript
javaScript中的原型解析【推荐】
May 05 #Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 #Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 #Javascript
You might like
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
php实现小程序支付完整版
2018/10/09 PHP
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
python中反射用法实例
2015/03/27 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
详解Python用户登录接口的方法
2019/04/17 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
windows下python安装pip方法详解
2020/02/10 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
银行求职推荐信范文
2013/11/30 职场文书
初中政治教学反思
2014/01/17 职场文书
毕业生就业意向书
2014/04/01 职场文书
股指期货心得体会
2014/09/10 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年司法所工作总结
2015/04/27 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Pytest中skip skipif跳过用例详解
2021/06/30 Python
Java基础-封装和继承
2021/07/02 Java/Android
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server