JavaScript利用HTML DOM進行文件操作的方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript利用HTML DOM進行文件操作的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:07 PM

HTML DOM ツリー

1. DOM の概要

DOM は、XML や XHTML などの構造化ドキュメントにアクセスするために W3C によって開発された標準です。

W3C ドキュメントオブジェクトモデル (DOM) は、プログラムとスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できるようにする、プラットフォームと言語に依存しないインターフェイスです

コア DOM: あらゆる構造化ドキュメントの標準モデル

XML DOM: XML ドキュメントの標準モデル。 XML 要素を取得、変更、追加、削除するための標準です。

HTML DOM: HTML ドキュメントの標準モデル。すべての HTML 要素のオブジェクトとプロパティ、およびそれらにアクセスするためのメソッド (インターフェイス) を定義します。

2. DOM ノード

DOM 仕様によれば、ドキュメント内の各コンポーネントはノードです。 DOM 規制:

ドキュメント全体がドキュメントノードであり、ルートノードとも呼ばれます

各タグは要素ノードです

タグに含まれるテキストはテキストノードです

タグの各属性は属性ノードです

注釈は注釈ノードに属します

2.1DOM インターフェースとそのプロパティおよびメソッド

DOM は、ドキュメントを一連のノードインターフェイスとしてシミュレートします。ノードには、JavaScript または他のプログラミング言語を介してアクセスできます。はい

DOM のプログラミングインターフェイスは、一連の標準プロパティとメソッドを通じて定義されます。

2.1.1DOM プロパティ

いくつかの典型的な DOM 属性:

x.nodeName: x の名前

x.nodeValue: x の値

x.parentNode: x の親ノード。ルートノードを除き、親ノードは 1 つだけあります

x.childNodes: x の子ノード。複数の子ノードが存在する可能性があります

x.attributes: x の属性ノードのコレクション。複数の属性を持つことができます

ここで、x はノードオブジェクトです

2.1.2DOM メソッド

いくつかの典型的な DOM メソッド:

x.getElementsByTagName(name): 指定されたタグ名を持つすべての要素を取得します

x.appendChild(node): x
に子ノードを挿入します。

x.removeChild(node): x
から子ノードを削除します。

例:

//获得文档标题的文本内容
document.getElementsByTagName("title")[0].childNode[0].nodeValue

2.1.3 アクセスノード

方法 1: getElementsByTagName() メソッドを使用する

方法 2: ループを通じてノードツリーを走査する

方法 3: ノードの関係を利用してノードツリー内を移動する

2.1.4 ノード情報 :

nodeName: ノードの名前を取得します。これは読み取り専用です。

nodeValue: ノードの値を取得または設定します

nodeType: ノードのタイプ。読み取り専用です。 1、要素を表します、2 は属性を表します、3 はテキストを表します、8

はコメントを表し、9 はドキュメントを表します

3. ノードの操作

3.1 ノードの作成

createElement(tagName): 要素ノードを作成します

createTextNode(text): テキストノードを作成します

createAttribute(attrName): 属性ノードを作成します

3.2 ノードの追加

新しく作成されたノードを実際にドキュメントツリーに所属させるには、他の既存のノードと一緒に編成する必要があります。

appendChild(node) は、現在のノード内の最後の子ノードの後に新しい子ノードを追加します。パラメータは新しい子ノードです

insertBefore(newNode,node) は、現在のノード内で指定された子ノードの前に新しい子ノードを追加します。最初のパラメーターは新しい子ノードで、2 番目のパラメーターは現在のノード内で指定された子ノードです。

insertAfter() は、現在のノード内で指定された子ノードの後に新しい子ノードを追加します。最初のパラメーターは新しい子ノードで、2 番目のパラメーターは現在のノード内で指定された子ノードです。

setAttributeNode() は、現在の要素ノードに属性ノードを設定します。このメソッドを呼び出すノードのタイプは要素タイプであり、パラメータは設定される属性ノードです。

例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM创建并添加节点</title>
<script type="text/javascript">
function createAndAddNode(){
//div标签元素节点
var container = document.body.getElementsByTagName("div")[0];
//创建元素节点对象，元素名即标签名 <p>
var pEle = document.createElement("p");
//创建文本节点对象，文本内容就是参数值
var txtOfP = document.createTextNode("这是段落的文字");
//在元素节点内部添加一个文本节点<p>这是段落的文字
pEle.appendChild(txtOfP);
//在div元素节点后面添加新的子节点。<div><p>这是段落的文字</div>
container.appendChild(pEle);
//创建一个超链接标签节点
var aEle = document.createElement("a");
//创建文本节点
var txtOfA = document.createTextNode("博客园");
//在元素节点中添加文本节点，<a>博客园</a>
aEle.appendChild(txtOfA);
//创建一个href属性节点
var attrOfA = document.createAttribute("href");
//将href属性节点设置其属性值
attrOfA.nodeValue = "http:www.cnblogs.com";
//将属性节点添加到超链接元素节点中,即设置a元素标签的属性节点
aEle.setAttributeNode(attrOfA);
//将元素节点a添加到div中
container.appendChild(aEle);
}
//浏览器窗口加载时调用该方法
window.onload = createAndAddNode;
</script>
</head>
<body>
<div></div>
</body>
</html>

3.3 ノードを変更する

ノードの変更とは、通常、要素内のテキストの変更、または要素の属性値の変更を指します。どちらの場合も、nodeValue に値を割り当てることで、テキストノードまたは属性ノードを変更できます。後者については、OK

要素ノードで setAttribute メソッドを呼び出して、属性値を変更します。

例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM改变节点</title>
<script type="text/javascript">
function changeSize(){
var target = document.getElementById("txt_1");
//设置列的属性值为50
target.setAttribute("cols", "50");
//设置行的属性值为6 先访问属性节点集合，然后通过getNamedItem定位属性名，
target.attributes.getNamedItem("rows").nodeValue = "6";
}
function changeText() {
var target = document.getElementById("lbl_1");
//先访问该元素节点的子节点，子节点个数可以是多个，因此用了数组下标访问指定元素。然后通过nodeValue修改其值
target.childNodes[0].nodeValue = "您的个人简历：";
}
</script>
</head>
<body>
<form action="">
<label id="lbl_1" for="txt_1">多行文本框的标签文字</label>
<textarea id="txt_1" ></textarea>
<input type="button" name="btn" value="改变多行文本域的尺寸" onclick="changeSize();" />
<input type="button" name="btn" value="改变标签的文字" onclick="changeText();" />
</form>
</body>
</html>

3.3 ノードの削除

ノードの削除とは、通常、要素ノード内から要素に含まれるサブ要素またはテキストを削除することを指します。また、要素ノードに含まれる属性ノードも削除することもできます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM删除节点</title>
<script type="text/javascript">
function doRemoveNode() {
//label标签元素节点
var targetLbl = document.getElementById("lbl_1");
//从label元素节点中删除第一个子节点
targetLbl.removeChild(targetLbl.firstChild);
//文档元素，通过访问文档元素集合，指定位置元素获得多行文本域
var tagetArea = document.documentElement.getElementsByTagName("textarea")[0];
//文档中第一个form标签元素节点
var tagetForm = document.documentElement.getElementsByTagName("form")[0];
//删除文档中第一个form标签中的textarea
tagetForm.removeChild(tagetArea);
}
</script>
</head>
<body>
<form>
<label id="lbl_1" for="txt_1">多行文本框的标签文字</label>
<textarea id="txt_1" rows="" cols=""></textarea>
<input type="button" name="btn" value="删除节点" onclick="doRemoveNode();"/>
</form>
</body>
</html>

四、小結

DOM是文件在記憶體中表現的樹形結構，稱為DOM樹；DOM是W3C制定的存取文件的標準方法和屬性，稱為DOM介面
文件中的每個資料在樹狀結構上表示為一個節點，由所有節點組成的樹狀結構稱為節點樹或DOM樹
節點有多種類型，常見的有元素節點、屬性節點、文字節點、根節點、等。節點有名稱和值，但不同類型的節點其名稱和值意義不同

createElement()方法用於建立元素節點，createAttribute()方法用於建立屬性節點，createTextNode()方法用於建立文字節點，向元素節點內新增子元素節點或文字節點，可使用appendChild()方法。還有insertAfter()和insertBefore()方法是用來在特定的節點前後插入新的節點。要注意的是元素節點新增屬性節點的方法卻是setAttributeNode()方法。

要修改文字節點的值或改變屬性節點的值，應使用節點的nodeValue屬性

刪除節點使用removeChild()方法。

關於JavaScript利用HTML DOM進行文件操作的方法，小編就跟大家介紹這麼多，希望對大家有幫助！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles