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

节点类型
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
(0)

相关推荐

  • 使用jQuery监听DOM元素大小变化

    起因 今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出.但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height. onresize? 平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数.使用的是window对象的resize事件,利用: window.onresize =

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • javascript实现dom元素可拖动

    摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(

  • jQuery添加删除DOM元素方法详解

    本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM

  • jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

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

    节点类型 nodeType 以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr 3: 文本text 8: 注释comments 9: 文档document nodeName,nodeValue 节点关系 childNodes: 每个节点都有一个childNodes属性,其中保存着一个NodeList对象 firstChild: 等同于childNodes[0] lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的pr

  • JavaScript实现清空(重置)文件类型INPUT元素值的方法

    本文实例讲述了JavaScript实现清空(重置)文件类型INPUT元素值的方法.分享给大家供大家参考,具体如下: 因为安全限制,脚本是不能随意设置其value值的,所以并不能像其它表单输入域那样用属性来设置使其重置. 重置一个文件域的值,归纳起来主要有 3 种方法. 本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo. 重置文件域的三种方法: 1. 设置value属性为空. 对于IE11以上和其它较新的非IE的现代浏览器Chrome/Firefox/Ope

  • Javascript从数组中随机取出不同元素的两种方法

    一.常规算法 第一种方法较常规,经测试有bug,数据量大以后随机几次返回的对象直接是function而不是object. 当然简单数据类型应该没有这个问题. 示例代码 /** 从数组中随机抽取数据 2016-09-09 **/ function getArrItem(arr, num) { var temp_array = new Array(); for (var index in arr) { temp_array.push(arr[index]); } var return_array =

  • JavaScript从数组中删除指定值元素的方法

    本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个removeByValue的方法,调用非常简单 定义函数removeByValue进行元素删除 function removeByValue(arr, val) { for(var i=0; i<arr.length; i++) { if(arr[i] == val) { arr.splice(i,

  • Python中快速掌握Data Frame的常用操作

    掌握Data Frame的常用操作 一. 查看DataFrame的常用属性 DataFrame基础属性有:values(元素).index(索引).columns(列名) .dtypes(类型).size(元素个数).ndim(维度数)和 shape(形状大小尺寸),还有使用T属性 进行转置 import pandas as pd detail=pd.read_excel('E:\data\meal_order_detail.xlsx') #读取数据,使用read_excel 函数调用 # pr

  • Python中字典的基础介绍及常用操作总结

    目录 1.字典的介绍 2.访问字典的值 (一)根据键访问值 (二)通过get()方法访问值 3.修改字典的值 4.添加字典的元素(键值对) 5.删除字典的元素 6.字典常见操作 1.len 测量字典中键值对的个数 2. keys 返回一个包含字典所有KEY的列表 3. values 返回一个包含字典所有value的列表 4. items 返回一个包含所有(键,值)元祖的列表 5.遍历字典的key(键) 6.遍历字典的value(值) 7.遍历字典的items(元素) 8.遍历字典的items(键

  • Python中元组的基础介绍及常用操作总结

    目录 1.元组的介绍 2.访问元组 3.修改元组(不可以修改的) 4.元组的内置函数有count,index 5.类型转换 1.将元组转换为列表 2.将元组转换为集合 1.元组的介绍 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 元组的格式: tup=('a','b','c','d') 2.访问元组 元组可以使用下标索引来访问元组中的值,下标索引从0开始 例如: tup=('a','

  • Python中字符串的基础介绍及常用操作总结

    目录 1.字符串的介绍 2.字符串的下标 3.字符串切片 4.字符串find()操作 5.字符串index()操作 6.字符串count()操作 7.字符串replace()操作 8.字符串split()操作 9.字符串startswith()操作 10.字符串endswith()操作 11.字符串upper()操作 12.字符串lower()操作 13.字符串title()操作 14.字符串capitalize()操作 15.字符串strip()操作 16.字符串rfind()操作 17.字符

  • Linux中Go环境配置和GoModule常用操作

    我为什么要学习go语言 当今已经是移动和云计算时代,Go出现在了工业向云计算转型的时刻,简单.高效.内 置并发原语和现代的标准库让Go语言尤其适合云端软件开发(毕竟它就是为此而设计的).到2014年,Go项目拥有了上百的核心贡献者,其生态圈中拥有了数不尽的第三方库和工具(https://godoc.org/),更有很多大公司开始或迁移到go语言,一些重量级的开源云项目,诸如Docker和Kubernetes 都是用Go语言实现的,一些运作基础设置的公司,诸如Google.CloudFlare.C

  • javascript 返回数组中不重复的元素

    这是实现结构伪类type-of-type的部分代码: var ret= ["span","span","strong","span","b"] var norepeat = function(array){ var set = array.join(",")+","; while(array.length){ var el = array.shift(); set =

随机推荐