一、认识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. js制作圆角按钮（兼容谷歌，ie7，ie8）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. MySQL运行原理与基础架构

    1.MySQL基础 MySQL是一个开放源代码的关系数据库管理系统.原开发者为瑞典的MySQL AB公司,最早是在2001年MySQL3.23进入到管理员的视野并在之后获得广泛的应用. 2008年My ...

  3. uDig介绍

    一 安装配置Java平台此步骤不必多说,如果您是Java开发者可以跳过.如果您的机器上没有Java平台,那么请到http://java.sun.com下载jdk,当下最新的版本是1.6.安装jdk,请 ...

  4. C(n,k)在n个不重复数中获得k个数

    //比如在数组a[]={1,7,89,87} 中k=2的时候 组合为 C(4,2)=6 package 再次开始; import java.util.ArrayList; //本次实现的是在n个不重复 ...

  5. 【解决】Oracle服务器ip地址被占用

    数据库服务器ip地址被占用,怎么破?! 服务器: 1.改服务器ip: 2.改tnsnames.ora里配置的Oracle数据库ip: 3.重启Oracle服务: 客户端: 1.改tnsnames.or ...

  6. HW3.26

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  7. c语言 字符版 简易2048

    花了两个多小时,用最蠢的方法写的……最简陋版…… 还不确定这么写逻辑对不对…… #include <iostream> #include <cstdio> #include & ...

  8. A Tour of Go Short variable declarations

    Inside a function, the := short assignment statement can be used in place of a var declaration with ...

  9. (qsf文件 、 tcl文件 和 csv(txt)文件的区别) FPGA管脚分配文件保存、导入导出方法

    FPGA管脚分配文件保存方法 使用别人的工程时,有时找不到他的管脚文件,但可以把他已经绑定好的管脚保存下来,输出到文件里. 方法一: 查看引脚绑定情况,quartus -> assignment ...

  10. PHP流程控制（一）

    单项分支: if(bool判断); 这里只写一句话有作用! if(bool){ 这里可以写多句话! } 双向分支: if(bool判断){ 如果为真则执行这里的语句,可以写多句:(注意如这里没有括号, ...