整理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运行时库属性一览表
Mar 14 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
Vue底层实现原理总结
Feb 17 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
vue组件中的数据传递方法
May 14 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
帝国cms目录结构分享
2015/07/06 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
新闻内页-JS分页
2006/06/07 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
Vue渲染函数详解
2017/09/15 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python实现Adapter模式实例代码
2018/02/09 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python Map 函数的使用
2020/08/28 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
铭立家具面试题
2012/12/06 面试题
MYSQL基础面试题
2012/05/13 面试题
学期自我鉴定范文
2013/10/01 职场文书
合作意向书范本
2014/03/31 职场文书
我的梦想演讲稿
2014/04/30 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
农村文化建设标语
2014/10/07 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
宣传稿格式范文
2015/07/23 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Python OpenGL基本配置方式
2022/05/20 Python