文档章节

前端开发-JavaScript入门 DOM篇

光光jerry
 光光jerry
发布于 2016/05/09 14:55
字数 688
阅读 6
收藏 0

一、认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

看下面代码:

<a href="http://www.imooc.com">JavaScript DOM</a>

二、通过ID获取元素

学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:

 document.getElementById(“id”)

看看下面代码:

结果:null或[object HTMLParagraphElement]


三、innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下:

结果:


四、改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:

<p id="pcon">Hello World!</p> <script>    var mychar = document.getElementById("pcon");    mychar.style.color="red";    mychar.style.fontSize="20";    mychar.style.backgroundColor ="blue"; </script>

结果:


五、显示和隐藏(display属性)

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

六、控制类名(className 属性)

className 属性设置或返回元素的class 属性。

语法:

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码,获得 <p> 元素的 class 属性和改变className:

结果:














































© 著作权归作者所有

光光jerry
粉丝 0
博文 15
码字总数 33546
作品 0
渝北
程序员
私信 提问
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
2018/06/14
0
0
React Native 从入门到原理

动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题。无论采用何种方式,我们的流程总是可以归结为以下三部曲:“从 Server 获取配置 --> 解析 --> 执行native代码...

HeroHY
2017/02/13
19
0
React Native 从入门到原理

React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几。 本文分为两个部分:上半部分用通俗的语...

guozhendan
2018/06/26
0
0
WisdomPlanet-Javascript-Primer

WisdomPlanet-Javascript-Primer是一本Javascript入门方面的前端书,目前刚开始连载。书中以小说故事模式开展,讲解了JS的语言基础,作者希望通过此书让刚学编程或准备学习JS的同学作为一个学...

念念之间
2015/04/01
2
0
《JavaScript DOM 编程艺术(第2版)》 推介

因为想学习一下前端的编程,所以搜罗了一些JavaScript的书目,其中就包括了这本,总的来说,并没有让我失望吧,推荐阅读,有人说这本书对于新手来说还是有些困难,但看过后,我认为这本书就是...

幸运的兔脚
2013/05/04
114
0

没有更多内容

加载失败,请刷新页面

加载更多

新建作业20191011121223

2.编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound,Sally shouted,"By the Great Pumpkin,what was that!" #include<stdio.h>int main(){printf("\a");......

电子197朱妍
19分钟前
2
0
家庭作业——苗钰婷

2 编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound, Sally shouted, "By the Great Pumpkin, what was that! #include<stdio.h>int main(){......

OSC_Okruuv
40分钟前
6
0
经典系统设计面试题解析:如何设计TinyURL(一)

原文链接: https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
41分钟前
5
0
2.面向对象设计原则(7条)

开闭原则 开闭原则的含义是:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求。 实现方法 可以通过“抽象约束、封装变化”来实...

Eappo_Geng
43分钟前
8
0
8086汇编基础 debug P命令 一步完成loop循环

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
48分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部