jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説
HTML DOM (Document Object Model) では、各部分がノードです。
ノードは DOM 構造の最も基本的なコンポーネントです。各 HTML タグは DOM 構造のノードです。
Document はドキュメントノードです。
すべての HTML 要素は要素ノードです
すべての HTML 属性は属性ノードです
HTML 要素に挿入されるテキストはテキスト ノードです
コメントはコメント ノードです。
最も基本的なノード タイプは Node タイプです。他のすべてのタイプは Node から継承されます。多くの場合、DOM 操作は js で最もコストがかかる部分であるため、NodeList が最も問題を引き起こします。注: NodeList は「動的」です。つまり、NodeList オブジェクトがアクセスされるたびにクエリが実行されますが、これによりオーバーヘッドが増加しますが、新しく追加されたノードが NodeList に確実にアクセスできるようになります。
すべての要素ノードには共通の属性とメソッドがあります。詳しく見てみましょう:
まず、より一般的に使用される一般的な属性を見てみましょう
1 element.id 要素の ID を設定または返します。
2 element.innerHTML ノード内のサブタグとコンテンツを含めることができる要素のコンテンツを設定または返します。
3 element.innerText サブタグとコンテンツを含まない要素のコンテンツを設定または返しますノード内
4 element.className 要素のクラス名を設定または返します
5 element.nodeName ノードの大文字のラベル名を返します
6 element.nodeType ノードのノード タイプを返します、1 は要素ノードを意味します2 は属性ノードを意味します...
7 要素。nodeValue 要素ノードの値を返します。
8 element.childNodes 要素の子ノードのノードリスト オブジェクトを返します。配列であり、長さ属性を持ちます。角括弧 [index] を使用して、指定したインデックスにアクセスできます (item(index) メソッドを使用することもできます)。ただし、nodelist は配列ではありません。
9 element.firstChild/element.lastChild 要素の最初/最後の子ノード（コメントノードとテキストノードを含む）を返します
10 element.parentNode ノードの親ノードを返します
11 element.previousSibling 同じものを返しますas 現在のノードと同じレベルにある前のノード(コメントノードとテキストノードを含む)
12 element.nextSibling 現在のノードと同じレベルにある次のノード(コメントノードとテキストノードを含む)を返す
13 要素.chileElementCount: 子要素を返します (テキスト ノードとコメント ノードを除く)
14 element.firstElementChild /lastElementChild 最初/最後の子要素を返します (テキスト ノードとコメント ノードを除きます)
15 element.previousElementSibling/nextElementSibling 前/次の兄弟要素 (テキスト ノードと注釈ノードを除く)
16 element.clientHeight/clientWidth コンテンツの視覚的な高さ/幅を返します (境界線、マージン、またはスクロール バーを除く)
17 element.offsetHeight/offsetWidth /offsetLeft /offset/ Top 親要素を基準とした要素の高さ/幅/左オフセット/右オフセットを返します(ボーダーとパディングを含み、マージンを除く)
18 element.style 要素のスタイル属性を設定または返します。例: element.style.backgroundColor CSS とは異なり、style 属性では水平バーを削除する必要があり、2 番目の単語の最初の文字を大文字にする必要があることに注意してください
19 element.tagName 要素のタグ名 (大文字) を返します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px solid rebeccapurple;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' name="cangjingge" >
请选择功法：<br/>
<input type="radio" name="gongfa" value="jysg">九阳神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
</form>
<p>少侠请三思！！！</p><!--注释标签-->
<p>推荐功法-->葵花宝典</p>
<script>
//js演示代码请添加至此
var a=document.getElementById('first_form'),
b = document.getElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.log(a.nodeName);
console.log(a.nodeType);
console.log(a.nodeValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>
</body>
</html>ブラウザに結果が表示されます:
いくつかの排他的な属性もあります
排他的な属性とは、特定のラベルに排他的な属性を指します。たとえば、 タグには href 属性と target 属性があります。 には src 属性があり、
a_element.href より一般的に使用される一般的なメソッドを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' name="cangjingge" >
请选择功法：<br/>
<input type="radio" name="gongfa" value="jysg">九阳神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
</form>
<p>少侠请三思！！！</p>
<script>
//js演示代码请添加至此
</script>
</body>
</html>(以下のすべての js デモ コードは、実験オブジェクトとしてこのドキュメントのサンプル HTML コードに基づいています)
1 element.appendChild(nodeName) 新しい子ノードを要素に最後の子ノードとして追加し、戻ります子ノード。新しい要素を HTML DOM に追加するには、まず要素を作成し、それを既存の要素に追加する必要があります。
js デモコード:
var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重选择");
a.appendChild(textnode)2 element.getAttribute(para) 要素ノードの指定された属性値を返します。
js デモ コード:
var a=document.getElementById('first_form'); console.log(a.getAttribute('name')) //控制台输出name的值
3 element.getAttributeNode(para) 指定された属性ノードを返します。
js デモ コード:
var a=document.getElementById('first_form'); console.log(a.getAttributeNode('name')) //控制台输出name属性节点
4 element.getElementsByTagName(para) 指定されたタグ名を持つすべての子要素のコレクションを返します。
js デモコード:
var a=document.getElementById('first_form'); console.log(a.getElementsByTagName('input')) //控制台输出
5 element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。
js演示代码：
var a=document.getElementById('first_form'); console.log(a.hasAttribute('name')) //控制台输出
6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。
js演示代码：
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天马流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);7 element.removeAttribute() 从元素中移除指定属性。
js示例代码：
var a=document.getElementById('first_form'); a.removeAttribute('name'); console.log(a.hasAttribute('name'))
8 element.removeChild() 从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。
js示例代码：
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3]);9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。
10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。
js示例代码：
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)11 element.setAttributeNode() 修改指定属性节点
js示例代码：
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)12 nodelist.item() 返回 NodeList 中位于指定下标的节点。
js示例代码：
var a=document.getElementsByTagName('input') console.log(a.item(2))
以上就是小编为大家带来的jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説全部内容了，希望大家多多支持PHP中文网~
更多jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説相关文章请关注PHP中文网！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7502
15
1377
52
78
11
19
54
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:16 PM
この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。
ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:17 PM
この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
chart.js：パイ、ドーナツ、バブルチャートを始めます
Mar 15, 2025 am 09:19 AM
このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。 パイとリングチャートを作成します パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。 パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します
初心者向けのタイプスクリプト、パート2：基本データ型
Mar 19, 2025 am 09:10 AM
エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull
