欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-13 17:18:00
节点类型 nodetype 以下是一些重要的nodetype的取值： 1： 元素element 2： 属性attr 3： 文本text 8： 注释comment...

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

上一篇： 2019年JVM最新面试题，必须收藏它

下一篇： 收集的55个Linux系统管理中常用的一些shell命令

推荐阅读