JS --DOM CSS

時間 2019-11-21

標籤 dom css 欄目 JavaScript 简体版

原文原文鏈接

DOM(文檔對象類型)javascript

經過DOM，能夠訪問HTML文檔中的全部元素
html

當某個網頁被加載時，瀏覽器會建立該頁面的文檔對象模型。
java

經過可編程對象模型，JS能夠作以下事情編程

1).改變頁面中的HTML元素
瀏覽器

2).改變頁面中的HTML屬性
ui

3).改變頁面中的CSS樣式
code

4).對頁面中的全部事件做出響應
htm

1.查找HTML元素
對象

1>經過id查找HTML元素
事件

2>經過標籤名查找HTML元素

3>經過類名找到HTML元素

1.1經過id查找HTML元素，直接上例子

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <!-- 1.經過id查找HTML元素 -->
    <p id="test">Hello World!</p>
    <!-- innerHTML屬性的做用
        1.獲取對象內容
        2.向對象插入內容
    -->
    <script type="text/javascript">
        x = document.getElementById("test");
        document.write("經過id查找到的標籤的內容:"+x.innerHTML);
    </script>
</body>
</html>

1.2 經過標籤名查找HTML元素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <!-- 2.經過標籤名查找HTML元素 -->
    <div id="name">
        <p> first </p>
        <p> second </p>
    </div>
    <script type="text/javascript">
        var x = document.getElementById("name");
        var y = x.getElementsByTagName("p");
        document.write("對象"+y+"中的第2個元素:"+y[1].innerHTML);
    </script>
</body>
</html>

2.經過JS改變HTML元素中的內容

2.1 改變HTML輸出流

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <!-- 經過JS改變HTML輸出流-->
    <script type="text/javascript">
    /***獲取系統當前日期***/
    document.write(Date());
    </script>
</body>
</html>

2.2 改變HTML內容

修改HTML內容最簡單的方法是使用innerHTML屬性。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <!-- 經過JS改變HTML內容-->
    <p id="p1">原始內容</p>
    <script type="text/javascript">
        document.getElementById("p1").innerHTML = "改變內容";
    </script>
</body>
</html>

2.3 改變HTML屬性

若是須要改變HTML元素的屬性，請使用attribute屬性。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <!-- 經過JS改變HTML屬性 -->
    <img id="image" src="/one.jpg">
    <script type="text/javascript">
        <!-- 改變src的屬性,由.jpg改成.gif -->
        document.getElementById("image").src = "/two.gif";
    </script>
</body>
</html>

3.改變HTML樣式

改變樣式使用屬性style

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <p id="p1">這是p1</p>
    <p id="p2">這是p2</p>
    <script type="text/javascript">
    document.getElementById("p1").style.color = "blue";
    </script>
</body>
</html>

1. HTML,CSS,JS,DOM
2. JS DOM
3. JS - DOM
4. js-DOM
5. js Dom
6. CSS與JS對DOM的阻塞行爲
7. js和css對dom的阻塞
8. JS中的DOM
9. js-dom學習
10. js數組 DOM
更多相關文章...
• W3C CSS 活動 - W3C 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。