整理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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
js实现模拟购物商城案例
May 18 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 实现从数据库导出到.csv文件方法
2017/07/06 PHP
php工具型代码之印章抠图
2018/07/18 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
护士个人自我鉴定
2014/03/24 职场文书
外贸业务员求职信
2014/06/16 职场文书
小学教师读书活动总结
2014/07/08 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
客房领班岗位职责
2015/02/11 职场文书
导游词300字
2015/02/13 职场文书
湘江北去观后感
2015/06/15 职场文书
工作时间证明
2015/06/15 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书