3.1 认识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"。

3.2 通过ID获取元素

语法:  document.getElementById(“id”)

结果: null或[object HTMLParagraphElement]

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

3.3 innerHTML 属性

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

语法:

Object.innerHTML

注意:

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

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

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

结果:

3.4 改变 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>

结果:

3.5 显示和隐藏（display属性）

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

语法：

Object.style.display = value

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

value取值:

看看下面代码:

3.6 控制类名（className 属性）

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

语法：

object.className = classname

作用:

1.获取元素的class 属性

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

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

结果:

js基础学习笔记（三）的更多相关文章

  1. handlebars.js基础学习笔记

    最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

  2. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  3. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  4. node.js 基础学习笔记3 -http

    http模块,其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端 http.server是一个基于事件的HTTP服务器 http.request则是一个HTTP客户端工具,用户向服务器发送请 ...

  5. Java基础学习笔记三 Java基础语法

    Scanner类 Scanner类属于引用数据类型,先了解下引用数据类型. 引用数据类型的使用 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固定的步骤或格式. 数据类型 变量名 ...

  6. js基础学习笔记（二）

    2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出&q ...

  7. js 基础学习笔记（一）

    javascript基础 .组成部分:由 ECMAScript(翻译,核心,解释器).DOM(操作HTML的能力).BOM(浏览器window)三部分组成. 兼容性依次为 [1.几乎没有兼容性问题.2 ...

  8. node.js 基础学习笔记3 -express

    1.工作原理 当通过app.js建立的服务器时,会看到一个简单的页面.返回页面时,浏览器会向服务器发送请求.app会解析请求的路径,调用相应的逻辑,调用对应的视图模板,传递对象数值,最终生成HTML页 ...

  9. node.js 基础学习笔记2

    Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...

随机推荐

  1. 微信小程序 错误记录

    1.报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api req ...

  2. 梦殇 chapter five

    一弦情殇未谱,半纸离愁难书,不记年,叹花开几度...... 蜡烛用它自己的死亡来温暖别人,奉献自己的同时,它内心是快乐的吗?那残留的蜡油是它的泪水,还是它快乐的预兆? 这个世界上除了父母家人外,会有真 ...

  3. SSH Secure File Transfer Client 无法登陆

    嘉之叹息 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATI ...

  4. Python中setup.py一些不为人知的技巧

    http://python.jobbole.com/80912/ 在我开始之前,我想先说清楚我将要解释的是些“窍门”.他们不是“最好的做法”,至少在一种情况下是不可取的. 说到不可取的做法,我会适时写 ...

  5. 前端面试问题css汇总

    1,行内元素有哪些?块级元素有哪些?空元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul li 行内元素: a b br i span input select ...

  6. iOS.FBTweak

    FBTweak的源码分析 1. FBTweak提供了以下功能 A): 可以动态的修改某个变量的值,这些变量的类型包括: ... B): 可以以plist的形式将Tweak以key-value的形式进行 ...

  7. 第一个ASP.NET Web API (C#)程序

    本文翻自http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api 绝对手工制作,如有雷同,实属巧合. 转载请注明. ...

  8. 在nginx中,禁止IP访问.只可以使用域名访问.

    if ($host ~* "\d+\.\d+\.\d+\.\d+"){ ; } 其实说白了, 就是进行host主机头过滤,使用正则来判断下.

  9. 上传文件 input file

    //-----前端文件------- form id="uploadForm" enctype="multipart/form-data"> <in ...

  10. tomcat+bean例子

    C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\app\WEB-INF\classes\文件夹下 建立beanTestPa ...