ノードの作成について
HTMLに対して、javascriptで動的にノード(Node型)を作成する方法があります。
Node型はツリー構造にすることができ、そのツリー構造内で新たにノードを挿入したり削除することができます。
また、置き換えることもできます。
実際にサンプルを用意して、ノードの作成を試してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
</div>
<script type="text/javascript">
// ID「test1」のノードを作成
let tn1 = document.createTextNode("test1");
console.log("tn1 -> " + tn1);
</script>
</body>
</html>
出力結果は次のようになります。
tn1 -> [object Text]
上記の結果、テキストオブジェクトが生成されていることがわかります。
では、このテキストオブジェクトの中身を展開して、一つづつ出力してみます。
上記のHTMLファイル内に次のように追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
</div>
<script type="text/javascript">
// ID「test1」のノードを作成
let tn1 = document.createTextNode("test1");
console.log("tn1 -> " + tn1);
// オブジェクトの内容を確認する
for(var key in tn1){
console.log(key + " : " + tn1[key]);
}
</script>
</body>
</html>
結果は次のようになります。
wholeText : test1
assignedSlot : null
splitText : function splitText() { [native code] }
data : test1
length : 5
previousElementSibling : null
nextElementSibling : null
after : function after() { [native code] }
appendData : function appendData() { [native code] }
before : function before() { [native code] }
deleteData : function deleteData() { [native code] }
insertData : function insertData() { [native code] }
remove : function remove() { [native code] }
replaceData : function replaceData() { [native code] }
replaceWith : function replaceWith() { [native code] }
substringData : function substringData() { [native code] }
nodeType : 3
nodeName : #text
baseURI : https://propansystem.net/blogsample/js/036/test1.html
isConnected : false
ownerDocument : [object HTMLDocument]
parentNode : null
parentElement : null
childNodes : [object NodeList]
firstChild : null
lastChild : null
previousSibling : null
nextSibling : null
nodeValue : test1
textContent : test1
ELEMENT_NODE : 1
ATTRIBUTE_NODE : 2
TEXT_NODE : 3
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8
DOCUMENT_NODE : 9
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12
DOCUMENT_POSITION_DISCONNECTED : 1
DOCUMENT_POSITION_PRECEDING : 2
DOCUMENT_POSITION_FOLLOWING : 4
DOCUMENT_POSITION_CONTAINS : 8
DOCUMENT_POSITION_CONTAINED_BY : 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : 32
appendChild : function appendChild() { [native code] }
cloneNode : function cloneNode() { [native code] }
compareDocumentPosition : function compareDocumentPosition() { [native code] }
contains : function contains() { [native code] }
getRootNode : function getRootNode() { [native code] }
hasChildNodes : function hasChildNodes() { [native code] }
insertBefore : function insertBefore() { [native code] }
isDefaultNamespace : function isDefaultNamespace() { [native code] }
isEqualNode : function isEqualNode() { [native code] }
isSameNode : function isSameNode() { [native code] }
lookupNamespaceURI : function lookupNamespaceURI() { [native code] }
lookupPrefix : function lookupPrefix() { [native code] }
normalize : function normalize() { [native code] }
removeChild : function removeChild() { [native code] }
replaceChild : function replaceChild() { [native code] }
addEventListener : function addEventListener() { [native code] }
dispatchEvent : function dispatchEvent() { [native code] }
removeEventListener : function removeEventListener() { [native code] }
createTextNode を実行することにより、HTMLドキュメント内に新規のテキストノードを一つ作成されたことがわかります。
この他、ノードにはcloneNode()メソッドがあり、引数のノードをコピーする機能があります。
書き方は以下のように書きます。
cloneNode(元ノード, true)
第2引数でtrueを指定すると、再帰的に元ノードの全てのノードがコピー
されます。
falseを指定すると、元ノードのみがコピーされます。