DOM操作一些常用的屬性總結_javascript技巧

1.DOM：文件物件模型DOM（Document Object Model）定義存取和處理HTML文件的標準方法。 DOM 將HTML文件呈現為具有元素、屬性和文字的樹狀結構（節點樹）。

2.DOM的一些常用的屬性

　　2.1 透過ID取得元素

　　　　（1）文法：

複製程式碼 程式碼如下:

document.getElementById("id");

　　　　（2）作用：id就向一個人的身分證，我們可以透過尋找標籤的id來尋找標籤，然後進行對應的操作。

　　　　（3）注意：不要忘記寫document！

　　2.2 innerHTML屬性

　　　　（1）文法：

複製程式碼 程式碼如下:

Obgect.innerHTML="Hello World"

　　　　（2）作用：主要是對標籤內的內容進行獲取或替換

　　　　（3）範例：

複製程式碼 程式碼如下:

javascript

JavaScript是一種基於物件、事件驅動的簡單腳本語言，嵌入在HTML文件中，由瀏覽器負責解釋和執行，在網頁上產生動態的顯示效果並實現與使用者互動功能。

　　　　（4）注意：Object是取得的元素對象，如透過document.getElementById("ID")取得的元素。

　　2.3 改變HTML樣式

　　　　（1）文法：

複製程式碼 程式碼如下:

Object.style.property

　　　　（2）作用：用於修改HTML樣式

　　　　（3）範例：

複製程式碼 程式碼如下:

 

I love JavaScript

 

JavaScript使網頁顯示動態效果並實現與使用者互動功能。

 

　　　　（4）注意：property有很多的樣式，例如color，height等等都可以用這個方法去修改,在一個就是不要忘記屬性後面都要加分號」「。

　　2.4 顯示與隱藏（display屬性）

　　　　（1）文法：

Object.style.display=value
　　　　（2）作用：網頁中常看到顯示和隱藏，就是用display屬性來實現的

　　　　（3）範例：

複製程式碼 程式碼如下:

<スクリプトタイプ="text/javascript">
関数 Hidetext()
                                                                            var mychar = document.getElementById("con");
mychar.style.display="none";
}
関数 showtext()
                                                                            var mychar = document.getElementById("con");
mychar.style.display="ブロック";
}

(4) 注: value の値は none と block です。none はコンテンツを表示しないことを意味し、block はコンテンツを表示することを意味します

2.5 className 属性

(1) 文法:

コードをコピーします コードは次のとおりです:

Object.className=クラス名

(2) 機能: 1. 要素のクラス属性を取得します。 2. Web ページ内の要素の CSS スタイルを指定して、要素の外観を変更します。

(3) 例：

コードをコピーします コードは次のとおりです:

<頭>

<スタイル>
body{ font-size:16px;}
.one{
border:1px 実線 #eee;
幅:230px;
高さ:50px;
背景:#ccc;
color:red;
}
.two{
border:1px 実線 #ccc;
幅:230px;
高さ:50px;
背景:#9CF;
color:blue;
}

JavaScript を使用すると、Web ページに動的な効果を表示し、ユーザーとのインタラクティブな機能を実装できます。

JavaScript を使用すると、Web ページに動的な効果を表示したり、ユーザーとのインタラクティブな機能を実装したりできます。

<スクリプトタイプ="text/javascript">
関数 add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
関数modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。