《JavaScript高等程序设计》笔记：DOM（十）

2024年5月10日 138次阅读 来源: 风雨后见彩虹

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);
    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000002405370
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞