文档章节

JS --DOM CSS

求是科技
 求是科技
发布于 2015/12/23 17:43
字数 602
阅读 23
收藏 2

DOM(文档对象类型)

通过DOM,可以访问HTML文档中的所有元素

当某个网页被加载时,浏览器会创建该页面的文档对象模型。

通过可编程对象模型,JS可以做如下事情

1).改变页面中的HTML元素

2).改变页面中的HTML属性

3).改变页面中的CSS样式

4).对页面中的所有事件作出响应

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>



© 著作权归作者所有

上一篇: SQL --分页
下一篇: SQL --case的应用
求是科技

求是科技

粉丝 98
博文 451
码字总数 232301
作品 0
成都
后端工程师
私信 提问
再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer
2018/06/21
0
0
高性能web开发 - 如何加载JS,JS应该放在什么位置?

外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问:为...

林文安
2012/05/16
0
0
利用Resource Timing监控资源加载速度

Resource Timing API Resource Timing API提供了让用户查看一个资源从输入url到下载下来经历的各个过程所消耗的时间,借此可以来衡量网站的性能。 我们可以通过Resource Timing Api监控哪个阶...

viki_lee
2018/09/05
0
0
写在前端性能优化之前你应该知道的 - 浏览器的加载和渲染

前言 一直想写点关于前端性能的东西,后来感觉所谓的性能优化最基本的前提是你要知道浏览器是如何针对web页面工作的.后来由于过年以及换工作等原因耽搁下来,只好利用这个休息的周末写一下. 本...

顽Shi
2014/03/23
0
0
Web性能优化 – 关键渲染路径以及优化策略

我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?” 《Designing for Performance》的作...

小铭星
2018/07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android ANR原理分析

一、概述 ANR(Application Not responding),是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR...

天王盖地虎626
6分钟前
0
0
IT兄弟连 Java语法教程 Java开发环境 安装JDK

因为我们要开发Java程序,所以必须在我们的计算机中安装Sun(Oracle)公司提供给我们的JDK。目前最新版本的JDK是JDK 10,但是我们以学习JDK 8为主,所以我们要安装的版本是JDK 8。安装步骤如...

老码农的一亩三分地
11分钟前
0
0
Spring Boot Repository查询条件关键字

查询条件关键字 Keyword Sample JPQL snippet And findByLastnameAndFirstname … where x.lastname = ?1 and x.firstname = ?2 Or findByLastnameOrFirstname … where x.lastname = ?1 or......

兜兜毛毛
18分钟前
0
0
[js]closeure闭包

// // closure 1 function func() { var count = 0; function cal(){ count += 2; console.log(count); return count; ......

Danni3
18分钟前
0
0
centos 设置hostname

1、centos 6 hostname配置文件为 /etc/sysconfig/network 内容为 NETWORKING=yesHOSTNAME=test_hostname hostname是Linux系统下的一个内核参数,它保存在 /proc/sys/kernel/hostname 下,但......

燃犀
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部