js基础学习笔记（三）
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基础学习笔记（三）的更多相关文章
- handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- node.js 基础学习笔记3 -http
http模块,其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端 http.server是一个基于事件的HTTP服务器 http.request则是一个HTTP客户端工具,用户向服务器发送请 ...
- Java基础学习笔记三 Java基础语法
Scanner类 Scanner类属于引用数据类型,先了解下引用数据类型. 引用数据类型的使用 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固定的步骤或格式. 数据类型 变量名 ...
- js基础学习笔记（二）
2.1 输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出&q ...
- js 基础学习笔记（一）
javascript基础 .组成部分:由 ECMAScript(翻译,核心,解释器).DOM(操作HTML的能力).BOM(浏览器window)三部分组成. 兼容性依次为 [1.几乎没有兼容性问题.2 ...
- node.js 基础学习笔记3 -express
1.工作原理 当通过app.js建立的服务器时,会看到一个简单的页面.返回页面时,浏览器会向服务器发送请求.app会解析请求的路径,调用相应的逻辑,调用对应的视图模板,传递对象数值,最终生成HTML页 ...
- node.js 基础学习笔记2
Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...
随机推荐
- 基于kafka-net实现的可以长链接的消息生产者
今天有点时间,我就来说两句.最近接触的Kafka相关的东西要多一些,其实以前也接触过,但是在项目使用中的经验不是很多.最近公司的项目里面使用了Kafka消息中间件,由于以前的人员编写的客户端的类不是很 ...
- nginx与php-fpm原理
一．正向代理与反向代理 1.正向代理:访问google.com google.com vpn需要FQ才能访问 vpn 对于我们来说是可以感知到的(我们连接vpn),但对于google服务器是不知道 ...
- (转)android权限（permission）大全
文章转载自:http://blog.csdn.net/hai_qing_xu_kong/article/details/24265533 1.android.permission.WRITE_USER ...
- mysql5.6改进子查询实测试
表t1,t2 各自生成100万条记录. 表引擎 myiasm ,查询语句 select * from t1 where id2 in (select id2 from t2 ) 查询速度 2.x秒 ...
- PostThreadMessage
PostThreadMessage是一个Windows API函数.其功能是将一个队列消息放入(寄送)到指定线程的消息队列里,不等待线程处理消息就返回.
- 摹客iDoc201901-2新功能点评
2019才刚刚开始,摹客团队就已经蓄势待发.马不停蹄地给大家带来了又一份惊喜.实话说,这次小摹都忍不住要点个赞!下面就赶紧带大家看看iDoc又更新了哪些新功能: 1.标注和评论融合.协作更高效 iDo ...
- 深入理解python里面类的对象的赋值
class T(): def __init__(self): self.name= pass a=T() a.name= b=a #深入理解类,类里面的对象的赋值是指针赋值,也就是同时变的 b.nam ...
- Quartz入门教程
public class App { public static void main(String[] args) throws MessagingException, IOException { / ...
- Scrum 敏捷开发
使用敏捷开发一个月的事件,基本的开发模式跟我遇到的这个文章介绍的基本类似,暂时简单Copy到了这里...... http://www.scrumcn.com/agile/scrum-knowledge ...
- SpringBoot的读取properties文件的方式
转载:https://www.imooc.com/article/18252一.@ConfigurationProperties方式 自定义配置类:PropertiesConfig.java pack ...