HTML の概要 DOM_html/css_WEB-ITnose

この記事では主にDOMコンテンツ、DOMノード、ノード属性、HTML要素の取得方法を紹介します。

目次

1. DOM の概要: DOM の概要、および DOM の分類と機能の説明。

2. DOM ノード: DOM ノードの分類とノード階層を紹介します。

3. HTML DOM ノード属性: innerHTML、innerText、nodeName、nodeValue、nodeType などの HTML DOM ノード属性の紹介。

4. HTML 要素ノードを取得する方法: 要素ノードは getElementById、getElementsByName、getElementsByClassName、および getElementsByTagName メソッドを通じて取得できます。

1. はじめに

1.1 DOM の説明

説明: DOM の正式名は Document Object Model で、ドキュメント オブジェクト モデルです。ドキュメントをツリー構造に抽象化し、ドキュメント内のタグ、タグ属性、またはタグのコンテンツをツリー上のノードとして表すことができます。

1.2 DOM 分類

さまざまな操作オブジェクトに従って、Core DOM、XML DOM、HTML DOM に分けることができます。

Core Dom: Core Dom、あらゆる構造化ドキュメントの標準モデル。

XML DOM: XML 要素を操作する、XML ドキュメントの標準モデル。

HTML DOM: HTML 要素を操作する、HTML ドキュメントの標準モデル。

1.3 DOM 関数

① 要素のクエリ

② 要素の先祖、兄弟、子孫のクエリ

③ 要素の属性の取得と変更

④ 要素のコンテンツの取得と変更

⑤ 要素の作成、挿入、削除

2. DOM ノード

ドキュメント内のすべてのコンテンツは、ノード (ノード) として表現できます。例: HTML では、ドキュメント全体、各タグ、各タグの属性とテキスト。ノードとして使用できます。

2.1 ノードの分類

①

文書ノード(Document): XML全体、HTML文書

②

要素ノード(Element): 各XML、HTML要素

③

属性ノード(Attr): 各各 XML および HTML 要素の属性

④

Text ノード (Text): 各 XML および HTML 要素内のテキスト

⑤

Comment ノード (Comment): 各コメント

注: ここでの Document ノードは、一般的なterm は XMLDocument と HTMLDocument に分けることができます。同様に、Element も XMLElement と HTMLElement に分けることができます。

2.2 HTML DOM ノード階層

ノードには、親ノード、兄弟ノード、子ノードなど、相互に階層関係があります。

2.2.1 例:

HTML ドキュメントを HTML DOM ノード ツリーに変換する

2.2.2 例の図の紹介:

1) 93f0f5c25f18dab9d176bd4f6de5d30e 要素と 6c04bd5ca3fcae76e30b72ad730ca86d 要素の親ノード100db36a723c770d327fc0aef2ce13b1 要素です。

2) 要素と 要素は兄弟ノードです。

3) b2386ffb911b14667cb8f0f91ea547a7 要素は 93f0f5c25f18dab9d176bd4f6de5d30e 要素の子ノードです。

3. HTML DOM ノード属性

innerHTML、innerText、nodeName、nodeValue、nodeType などの HTML DOM ノード属性を紹介します。

3.1 innerHTML: ノードのコンテンツを HTML コード形式で取得または設定します

説明:

HTML 形式で innerHTML 属性に割り当てられると、HTML 形式で表示されます。たとえば、node.innerHTML="af51c81155ef533f72cf063356dc4fc3" とすると、ボタンが表示されます。

例:

document.getElementById('div').innerHTML="<input type='button' value='按钮' />"; // 设置div元素的innerHTML为一个按钮document.getElementById('div').innerHTML; // => <input type='button' value='按钮' /> ：以HTML格式返回节点的内容

3.2 innerText: ノードのテキストコンテンツを取得または設定します

説明:

テキスト文字列の形式でノードのコンテンツを取得または設定します。

例 1:

HTML 形式のコンテンツの割り当て5d9959d1580cea7057eca37c32670910 ;"。

例 2:

コンテンツを取得する場合、テキスト コンテンツのみが取得されます。

document.getElementById('div').innerText; // => "文本1 文本2"

3.3 nodeName: ノード名、読み取り専用属性を取得します

Description:

ノードタイプドキュメントノード(ドキュメント)Return #document要素ノード(Element)大文字の要素名を返す属性ノード(Attr)属性名を返すテキストノード(Text) #text を返す

no deName

示例：

console.log( document.nodeName ); // => #document：文档节点console.log( document.body.nodeName ); // => BODY：元素节点console.log( document.getElementById('div').nodeName ); // => DIV：元素节点console.log( document.getElementById('div').attributes.style.nodeName ); // => style：属性节点

　　

3.4 nodeValue：获取或设置节点的值

说明：文档节点、元素节点此属性返回null，并且为只读。

节点类型	nodeValue
文档节点(Document)	只读，返回null
元素节点(Element)	只读，返回null
属性节点(Attr)	获取或设置属性的值
文本节点(Text)	获取或设置文本的值

示例：

console.log( document.nodeValue ); // => null：文档节点console.log( document.body.nodeValue ); // => null：元素节点console.log( document.getElementById('div').nodeValue ); // => null：元素节点console.log( document.getElementById('div').attributes.style.nodeValue ); // => width:200px;height:100px;border:1px solid black;：style属性的值document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px'; // 设置style属性的值

 

 

3.5 nodeType：返回节点类型，只读属性

说明：

节点类型	nodeType
文档节点(Document)	9
元素节点(Element)	1
属性节点(Attr)	2
文本节点(Text)	3

示例：

console.log( document.nodeType ); // => 9：文档节点console.log( document.body.nodeType ); // => 1：元素节点console.log( document.getElementById('div').nodeType ); // => 1：元素节点console.log( document.getElementById('div').attributes.style.nodeType ); // => 2：属性节点

 

4. 获取 HTML 元素节点方法

　　文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法获取元素节点。

4.1 getElementById(id) ：获取指定ID的元素

参数：

①id {string} ：元素ID。

返回值：

{HtmlElement} 元素节点对象。若没有找到，返回null。

注意：

① HTML元素ID是区分大小写的。

② 若没有找到指定ID的元素，返回null。

③ 若一个父节点下面有多个相同ID元素时，默认选取第一个(而不是层级最高的)。

示例：

document.getElementById('div'); // => 获取ID为div的元素

 

4.2 getElementsByName(name) ：返回一个包含指定name名称的的元素数组

参数：

① name {string} ：name名称。

返回值：

{Array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。

示例：

document.getElementsByName('Btn'); // 返回一个name为btn的元素数组

 

4.3 getElementsByClassName(className) ：返回一个包含指定class名称的的元素数组

参数：

① className {string} ：class名称。

返回值：

{Array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。

示例：

document.getElementsByClassName('show'); // 返回一个class包含show的元素数组

 

4.4 getElementsByTagName(elementName) ：返回一个指定标签名称的的元素数组

参数：

① elementName {string} ：标签名称。如：div、a等等

返回值：

{Array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。

示例：

document.getElementsByTagName('div'); // 返回一个标签为div的元素数组

 

==================================系列文章==========================================

本篇文章：4.1 HTML DOM 介绍

Web开发之路系列文章