一、认识DOM

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

Eg:

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

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

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

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

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

Eg2:

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

二、通过ID获取元素

标签的id属性值是唯一的,就像每个人有一个身份证号,通过身份证号就可以找到相对应的人,在网页中先通过id找到标签,然后进行操作

语法:

document.getElementById("id")

Eg:

结果:null或[object  HTMLParagraphElement]

注:获取的元素是一个对象,如果对元素进行操作,我们要通过它的属性或方法。

三、innerHTML属性

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

语法:

Object.innerHTML

注:

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

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

Eg:通过id="con"获取<p>元素,并将元素的内容输出和改变元素内容

 四、改变HTML样式

语法:

Object.style.property=new style;

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

部分基本属性表(property)

Eg:改变<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属性)

语法:

Object.style.display = value

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

value取值:

六、控制类名(className属性)

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

语法:

object.className = classname

作用:

1、获取元素的class属性

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

Eg:获得<p>元素的class属性和改变className:

Eg2:

JavaScript入门(3)的更多相关文章

  1. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  2. JavaScript入门

    本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...

  3. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  4. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  5. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  6. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  7. 开心菜鸟系列----函数作用域(javascript入门篇)

      1 <!DOCTYPE html>   2 <html>   3 <script src="./jquery-1.7.2.js"></ ...

  8. 开心菜鸟系列----变量的解读(javascript入门篇)

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  9. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

  10. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

随机推荐

  1. backup archivelog all

     OLTP系统的生产库一般都是打开归档模式,当CUD操作频繁并且时常使用大批量处理时,每天的归档日志也是超级大的,如果长期保留这些归档日志磁盘空间消耗是很恐怖的,所以我们在使用RMAN进行数据库备份时 ...

  2. Spring注解@Component、@Repository、@Service、@Controller,@Autowired、@Resource用法

    一.Spring定义bean,@Component.@Repository.@Service 和 @Controller Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥 ...

  3. HDU5654xiaoxin and his watermelon candy 离线+树状数组

    题意:bc 77div1 d题(中文题面),其实就是询问一个区间有多少不同的三元组,当然这个三元组要符合条件 分析(先奉上官方题解) 首先将数列中所有满足条件的三元组处理出来,数量不会超过 nn个. ...

  4. jQuery掷骰子

    网上找的jQuery掷骰子效果,测试兼容IE7及以上浏览器,IE6没有测试 js代码如下: $(function(){ var dice = $("#dice"); dice.cl ...

  5. rmi 与 远程代理复习

    ref:http://blog.csdn.net/pipisky2006/article/details/7296592 RMI: 远程方法调用,简单来说以前是调用本地对象的方法,现在如果对象在另外一 ...

  6. javascript对象几种创建方式

    Javascript对象创建的几种方式  1.使用new运算符创建Object  var box=new Object();  box.name='肖能武';  box.age=28;    2.ne ...

  7. Tyvj P1729 文艺平衡树 Splay

    题目: http://tyvj.cn/p/1729 P1729 文艺平衡树 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 此为平衡树系列第二道:文艺平衡树 ...

  8. Hadoop工程师面试题(1)--MapReduce实现单表汇总统计

    数据源格式描述: 输入t1.txt源数据,数据文件分隔符"*&*",字段说明如下: 字段序号 字段英文名称 字段中文名称 字段类型 字段长度 1 TIME_ID 时间(到时 ...

  9. HUD-4602 Partition 排列

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4602 把n等效为排成一列的n个点,然后就是取出其中连续的k个点.分两种情况,一种是不包含两端,2^( ...

  10. aix 扩展文件系统

    今天发现公司的oracle测试 数据库不能启动,检查警告日志日志,提示归档空间不足,不能归档,于是扩展文件系统: 1.检查rootvg卷组的剩余空间[p2704u]:[/dsg/oracle11]$ ...