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初学者的学习线路和建议