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.模块和文件一一对应. ...
随机推荐
- Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GROUP BY clause; this
最近使用新版本的mysql,执行语句的时候报错.网上找了一下,解决方法如下: vim /etc/mysql/conf.d/mysql.cnf [mysqld] sql_mode=STRICT_TRAN ...
- hdu 1198 (并查集 or dfs) Farm Irrigation
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1198 有题目图11种土地块,块中的绿色线条为土地块中修好的水渠,现在一片土地由上述的各种土地块组成,需要浇 ...
- poj 2777(线段树+lazy思想) 小小粉刷匠
http://poj.org/problem?id=2777 题目大意 涂颜色,输入长度,颜色总数,涂颜色次数,初始颜色都为1,然后当输入为C的时候将x到y涂为颜色z,输入为Q的时候输出x到y的颜色总 ...
- UIButton 设置图片文字垂直居中排列
#pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titl ...
- Python之路(第二十七篇) 面向对象进阶：内置方法、描述符
一.__call__ 对象后面加括号,触发执行类下面的__call__方法. 创建对象时,对象 = 类名() :而对于 __call__ 方法的执行是由对象后加括号触发的,即:对象() 或者 类()( ...
- 隐马尔科夫_HMM
有向图 抽象:λ代表输入:输入一个句子,λi表示句子中的每个字 O代表输出:[B词首/M词中/E词尾/S单独成词] max=maxP(O1 O2 On/ λ1 λ2 λn) 假设: (1)当前观察值只 ...
- Python3实战系列之四（获取印度售后数据项目）
问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:此篇开始进入正题了.为实现我们整个项目功能而开始实现各个子模块功能.首先实现第一篇列出的分步功能模块的第一步: 1.python访问ftp,下 ...
- javascript 事件流的应用之 addEventListener
原始需求:防止按钮短时间内高频率触发点击事件,由于重复提交导致的业务异常. 图: demo: <!DOCTYPE html> <html lang="en" di ...
- ros主从关系
主机: 在~/.bashrc里面输入 export ROS_MASTER_URI=http://localhost:11311export ROS_HOSTNAME=192.168.4.1 其ip地址 ...
- .net从网络接口地址获取json，然后解析成对象（二）
整理代码,这是第二种方法来读取json,然后反序列化成对象的,代码如下: public static Order GetOrderInfo(string _tid, string _orderNo) ...