1. java dom編程藝術---第3章 DOM（自總）

時間 2019-11-11

標籤 java dom 編程藝術欄目 Java 简体版

原文原文鏈接

3.1 文檔：DOM中的「D」javascript

3.2 對象： DOM中的「o」css

對象可分爲三種類型html

用戶定義對象java

內建對角（內建在javascript語言裏的對象如 array、Math、DATA瀏覽器

宿主對象（瀏覽器提供）ui

3.3 模型：DOM中的」M」this

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>Shopping list</title>
     <style type="text/css">
p {
   color: yellow;
   font-family: "arial", sans-serif;
   font-size: 1.2em;
}
body {
   color: white;
   background-color: black;
}
#purchases {
   border: 1px solid white;
   background-color: #333;
   color: #ccc;
   padding: 1em;
}
#purchases li {
   font-weight: bold;
}
orm

<body>
     <h1>What to buy</h1>
     <p title="a gentle reminder">Don't forget to buy this stuff.</p>
     <p>This is just a test</p>
     <ul id="purchases">
       <li>A tin of beans</li>
       <li>Cheese</li>
       <li>Milk</li>
     </ul>htm

</body>對象

3.3.1 節點

節點：是文檔中的樹枝、樹葉而已

1.元素節點：

元素

一般，經過 JavaScript，您須要操做 HTML 元素。

爲了作到這件事情，您必須首先找到該元素。有三種方法來作這件事：

經過 id 找到 HTML 元素
經過標籤名找到 HTML 元素
經過類名找到 HTML 元素

2.文本節點

在XHTML文檔裏，文本節點老是被包含在元素節點的內部。

3.屬性節點

<p title="a gentle reminder">Don't forget to buy this stuff.</p>

4. css:層疊樣式表

//
#purchases {
   border: 1px solid white;
   background-color: #333;
   color: #ccc;
   padding: 1em;
}
#purchases li {
   font-weight: bold;
}

.class 屬性

     <p class=」special」 > this paragraph has the special class </p>

   <h2 class=」special」> so does this leadline </h2>

    定義一種共享樣式：

     .special{

      font-style:italic;

    }

    某一類獨享：

    h2.special{

      text-transform:uppercase;

   }

id 屬性

獨享樣式：

#purchases{

border:1px solid white;

background-color :#333

color:#ccc;

padding:1em;

}

只做用於包含在這個給定元素裏的有關元素：

#puichases li{

font-weight: bold;

}