JavaScript での DOM ノードへのアクセス、作成、変更、削除

ドム
DOMはDocument object Modelの略称です。文書オブジェクトモデルは、ＸＭＬやＨＴＭＬをツリーノードの形で表現した文書である。 DOM メソッドとプロパティを使用すると、ページ上の任意の要素にアクセス、変更、削除でき、また要素を追加することもできます。 DOM は言語に依存しない API であり、JavaScript
などのあらゆる言語で実装できます。以下のテキストの 1 つを見てください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
 <head> 
  <title>My page</title> 
 </head> 
 <body> 
  <p class="opener">first paragraph</p> 
  <p><em>second</em> paragraph</p> 
  <p id="closer">final</p> 
 </body> 
</html>

ログイン後にコピー

2 番目の段落を見てみましょう

<p><em>second</em> paragraph</p>

ログイン後にコピー

これは p タグであることがわかります。 bodyタグに含まれています。したがって、body は p の親ノードであり、p は子ノードです。最初と 3 番目の段落も本文の子ノードです。これらはすべて 2 番目の段落の兄弟ノードです。この em タグは、2 番目のセグメント p の子ノードです。したがって、 p はその親ノードになります。親子ノード関係は、ツリー状の関係を表すことができます。したがって、DOM ツリーと呼ばれます。

コア DOM と HTML DOM
DOM で HTML ドキュメントと XML ドキュメントを表現できることはすでにわかっています。実際、HTML ドキュメントは XML ドキュメントですが、より標準化されています。したがって、DOM レベル 1 の一部として、Core DOM 仕様はすべての XML ドキュメントに適用され、HTML DOM 仕様は Core DOM を拡張します。もちろん、HTML DOM はすべての XML ドキュメントに適用されるわけではなく、HTML ドキュメントにのみ適用されます。 Core DOM と HTML DOM のコンストラクターを見てみましょう。

コンストラクター関係

20151116142938841.png (639×572)

DOM ノードにアクセスします
フォームを検証したり画像を変更したりする前に、要素 (element.) にアクセスする方法を知っておく必要があります。要素を取得するにはさまざまな方法があります。

ドキュメントノード
ドキュメントを通じて現在のドキュメントにアクセスできます。 firebugs (Firefox プラグイン) を使用して、ドキュメントのプロパティとメソッドを表示できます。

すべてのノードには、nodeType、nodeName、nodeValue 属性があります。 document

のnodeTypeを見てみましょう

document.nodeType;//9

ログイン後にコピー

ノードタイプは全部で 12 種類あります。資料は9です。よく使われるのは、要素（要素：1）、属性（属性：2）、テキスト（テキスト：3）です。
ノードにも名前があります。 HTMLタグの場合。ノード名がラベル名になります。テキストノード(text)の名前は#text、ドキュメントノード(document)の名前は#document.
です。
ノードにも値があります。テキストノードの場合、値はテキストです。ドキュメントの値が null

documentElement
XML にはドキュメントをラップする ROOT ノードがあります。 HTMLドキュメントの場合。 ROOT ノードは html タグです。ルートノードにアクセスします。 documentElement のプロパティを使用できます。

document.documentElement;//<html> 
document.documentElement.nodeType;//1 
document.documentElement.nodeName;//HTML 
document.documentElement.tagName;//对于element，nodeName和tagName相同

ログイン後にコピー

子ノード
子ノードが含まれているかどうかを判断するには、次のメソッドを使用できます

document.documentElement.hasChildNodes();//true

ログイン後にコピー

HTML には 2 つの子ノードがあります。

document.documentElement.childNodes.length;//2 
 
document.documentElement.childNodes[0];//<head> 
 
document.documentElement.childNodes[1];//<body>

ログイン後にコピー

子ノードを通じて親ノードにアクセスすることもできます

document.documentElement.childNodes[1].parentNode;//<html>

ログイン後にコピー

本体の参照を変数

に代入します

var bd = document.documentElement.childNodes[1]; 
bd.childNodes.length;//9

ログイン後にコピー

体の構造を見てみよう

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

ログイン後にコピー

子ノードの数が 9 なのはなぜですか?
まずPが4つとコメントがあり、合計4つあります。
4 つのノードには 3 つのブランクノードが含まれます。それは7です。
本文と最初の p の間の 8 番目の空白ノード。
9 番目はコメントとの間の空白ノードです。
ノードは合計 9 つあります。

プロパティ
最初のノードは空白ノードなので、2 番目のノードが最初の p ラベルになります。

bd.childNodes[1];//  <p class="opener">

ログイン後にコピー

属性があるかどうかを確認できます

bd.childNodes[1].hasAttributes();//true

ログイン後にコピー

属性の数も確認できます

bd.childNodes[1].attributes.length;//1 
 
//可以用index和名字来访问属性，也可以用getAttribute方法。 
bd.childNodes[1].attributes[0].nodeName;//class 
 
bd.childNodes[1].attributes[0].nodeValue;//opener 
 
bd.childNodes[1].attributes['class'].nodeValue;//opener 
 
bd.childNodes[1].getAttribute('class');//opener

ログイン後にコピー

タグ内のコンテンツにアクセスします
最初のタグ p を見てみましょう
textContent プロパティを使用してアクセスできます。 IE ブラウザには textContent が存在しないことに注意してください。innerText に置き換えてください。結果は同じになります。

bg.childNodes[1].textContent;// "first paragraph"

ログイン後にコピー

innerHTML という属性もありますが、これは DOM 仕様ではありません。ただし、主要なブラウザはすべてこの属性をサポートしています。返されるのは HTML コードです。

bg.childNodes[1].innerHTML;// "first paragraph"

ログイン後にコピー

最初の段落には HTML コードがないため、結果は textContent (IE の innerText) と同じになります。 HTML コード

を含む 2 番目のタグを見てみましょう。

bd.childNodes[3].innerHTML;//"<em>second</em> paragraph" 
 
bd.childNodes[3].textContent;//second paragraph

ログイン後にコピー

テキストノードを取得してから、nodeValue 属性を取得する別の方法のコードは次のとおりです

bd.childNodes[1].childNodes.length;//1 子节点个数 
 
bd.childNodes[1].childNodes[0].nodeName;// 节点名称 #text 
 
bd.childNodes[1].childNodes[0].nodeValue;//节点值 first paragraph

ログイン後にコピー

快速访问DOM
通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中，文本节点是比较讨厌的。如果文本改变了，有可能就影响脚本了。还有如果DOM树足够的深入，那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是

getElementsByTagName()
getElementsByName()
getElementById()

ログイン後にコピー

首先说下getElementsByTagName()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下

document.getElementsByTagName('p').length;//3

ログイン後にコピー

因为返回的是个集合，我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。

document.getElementsByTagName('p')[0];// <p class="opener"> 
document.getElementsByTagName('p').item(0);//和上面的结果一样 
 
document.getElementsByTagName('p')[0].innerHTML;//first paragraph

ログイン後にコピー

访问元素的属性，可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子

document.getElementsByTagName('p')[2].id;//closer

ログイン後にコピー

要注意的是，class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。

document.getElementsByTagName('p')[0].className;//opener

ログイン後にコピー

我们可以用如下方法访问页面所有元素

<span style="color: #ff0000;">document.getElementsByTagName('*').length;//9</span>

ログイン後にコピー

注意：在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了，但是返回的是所有节点(node)，而不仅仅是元素节点(element nodes)。

Siblings, Body, First, Last Child
nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下

var para = document.getElementById('closer') 
para.nextSibling;//"\n" 
para.previousSibling;//"\n" 
para.previousSibling.previousSibling;//<p> 
para.previousSibling.previousSibling.previousSibling;//"\n" 
para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">

ログイン後にコピー

body 用来访问body元素的。

document.body;//<body>

ログイン後にコピー

firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。

遍历DOM
通过以上的学习，我们可以写个函数，用来遍历DOM

function walkDOM(n) { 
 do { 
  alert(n); 
  if (n.hasChildNodes()) { 
   walkDOM(n.firstChild) 
  }   
 } while (n = n.nextSibling) 
} 
 
walkDOM(document.body);//测试

ログイン後にコピー

修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。

var my = document.getElementById('closer');

ログイン後にコピー

非常容易更改这个元素的属性。我们可以更改innerHTML.

my.innerHTML = 'final';//final

ログイン後にコピー

因为innerHTML可以写入html，所以我们来修改html。

my.innerHTML = '<em>my</em> final';//<em>my</em> fnal

ログイン後にコピー

em标签已经成为dom树的一部分了。我们可以测试一下

my.firstChild;//<em> 
my.firstChild.firstChild;//my

ログイン後にコピー

我们也可以通过nodeValue来改变值。

my.firstChild.firstChild.nodeValue = 'your';//your

ログイン後にコピー

修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码

my.style.border = "1px solid red";

ログイン後にコピー

CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推

my.style.fontWeight = 'bold';

ログイン後にコピー

我们还可以修改其他的属性，无论这些属性是否被初始化。

my.align = "right"; 
my.name = 'myname'; 
my.id = 'further'; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">

ログイン後にコピー

创建节点

为了创建一个新的节点，可以使用createElement和createTextNode.如果新建完成，可以用appendChild()把节点添加到DOM树中。
创建一个元素P，并把设置innerHTML属性

var myp = document.createElement('p'); 
myp.innerHTML = 'yet another';

ログイン後にコピー

元素P建完成了，就可以随意修改添加属性了

myp.style.border = '2px dotted blue'

ログイン後にコピー

接下来可以用appendChild把新的节点添加到DOM树中的。

document.body.appendChild(myp)

ログイン後にコピー

使用DOM的方法
用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。

新建一个文本节点(yet another)
新建一个段落
把文本节点添加到段落中。
把段落添加到body中

// 创建p 
var myp = document.createElement('p'); 
// 创建一个文本节点 
var myt = document.createTextNode('one more paragraph') 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement('strong'); 
str.appendChild(document.createTextNode('bold')); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()

ログイン後にコピー

另一种新建节点的方法是，我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制，包括他的子节点，false，仅仅复制自己。

首先获取要复制的元素。

var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>

ログイン後にコピー

先不用深度复制。

document.body.appendChild(el.cloneNode(false))

ログイン後にコピー

我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。

document.body.appendChild(document.createElement('p'));

ログイン後にコピー

如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。

document.body.appendChild(el.cloneNode(true))

ログイン後にコピー

insertBefore()
用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。

elementNode.insertBefore(new_node,existing_node)

ログイン後にコピー

实例

document.body.insertBefore( 
 document.createTextNode('boo!'), 
 document.body.firstChild 
);

ログイン後にコピー

意思就是新建一个文本节点，把它作为body元素的第一个节点。

删除节点

要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

ログイン後にコピー

来看看下面代码，删除第二段

var myp = document.getElementsByTagName('p')[1]; 
var removed = document.body.removeChild(myp);

ログイン後にコピー

removed节点就是删除的节点。以后还可以用这删除的节点。

我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下

<body> 
 <p class="opener">first paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

ログイン後にコピー

我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p

var replaced = document.body.replaceChild(removed, p);

ログイン後にコピー

和removeChild返回一样。replaced就是移除的节点。现在结果为

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <!-- and that's about it --> 
</body>

ログイン後にコピー

JavaScript での DOM ノードへのアクセス、作成、変更、削除_基礎知識