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.模块和文件一一对应. ...
随机推荐
- (OS 64)指定的网络名不再可用，winnt_accept: Asynchronous AcceptEx failed.
在httpd.conf中添加 <IfModule mpm_winnt.c> ThreadsPerChild 150 MaxRequestsPerChild 10000 Win32Disab ...
- 梦殇 chapter three
chapter three 悲伤有N个层面.对于生命是孤独的底色,对于时间是流动的伤感,对于浪漫是起伏的变奏,对于善和怜悯是终生的慨叹…… 出去和舍友买完东西,刚回到宿舍,舍友就说,刚才有人给你打电话 ...
- overflow 在float浮动标签里的作用
overflow可以使浮动元素回归文档流,但是浮动元素却仍然具有浮动的属性 <!DOCTYPE html> <html lang="en"> <hea ...
- linux 文件搜索
locate 文件名 在后台数据库中按文件名搜索,搜索速度快,不用遍历整个操作系统 /var/lib/mlocate locate 命令所搜索的后台数据库 updatedb 手动更新数据库 新建的文 ...
- python之初接触
编程语言相关 1什么是编程语言 编程语言即语言,语言的本质就是沟通,因而编程语言与英语 .法语.日语等所有语言并无区别,只不过英语是人与人之间沟通的介质,而编程语言则是程序员与计算机沟通的介质. 程序 ...
- 服装类Web原型制作分享——Rodd & Gunn
Rodd & Gunn是国外知名的服装类品牌,服装种类繁多,有衣服.帽子.穿戴饰品等. 本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 网站原型以图文排版为 ...
- jsp页面错误的全局处理
网上搜索spring mvc项目全局异常处理: 大致可以找到两种方案 : 方案1: ExceptionHandlerResolver . spring 提供了两种默认实现,当然你也可以自己实现.. 方 ...
- 关于使用的xshll和xftp中乱码咋办？
1.Xshll中 2.Xftp中同理都是一样的设置
- ContactDetail 和 ContactEditor 界面头像响应点击过程
1,联系人详情界面 ContactDetailFragment中处理,ViewAdapter装载数据显示头像 private final class ViewAdapter extends BaseA ...
- 【Linux】Tree命令安装和使用
Tree命令简介 tree是一种递归目录列表命令,产生一个深度缩进列表文件,这是彩色的ALA dircolors如果ls_colors设置环境变量和输出是TTY.树已经被移植和报道以下操作系统下工作: ...