《JavaScript高级程序设计》笔记:DOM(十)

2018-12-24 09:10:00来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Node类型

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()

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
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);

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用Tampermonkey(油猴) 插件,重新实现了,百度搜索热点过滤功

下一篇:ES6学习之关键字