JavaScript入门(3)
一、认识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)的更多相关文章
- JavaScript入门篇 编程练习
编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...
- JavaScript入门
本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...
- 慕课网JavaScript入门篇课程笔记
1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
- JavaScript入门介绍(一)
JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...
- 开心菜鸟系列－－－－函数作用域（javascript入门篇）
1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></ ...
- 开心菜鸟系列－－－－变量的解读（javascript入门篇）
console.info( console.info(window['weiwu']) console.info(window. ...
- javascript入门视频第一天 小案例制作 零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
- ArcGIS API for JavaScript 入门教程[0] 目录
随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...
随机推荐
- windows下的BT服务器搭建方案
BT下载可以说是目前网络上最流行的P2P文件共享方式了.BT服务器相比于FTP服务器有许多优势,其中最重要的一点就是BT服务器不受服务器带宽和连接到服务器用户数量的限制,能够提供高速的下载服务.今天, ...
- POJ 2002 Squares 解题报告（哈希 开放寻址 & 链式）
经典好题. 题意是要我们找出所有的正方形.1000点,只有枚举咯. 如图,如果我们知道了正方形A,B的坐标,便可以推测出C,D两点的坐标.反之,遍历所有点作为A,B点,看C,D点是否存在.存在的话正方 ...
- SSL双向认证（高清版）
介绍了SSL双向认证的一些基本问题,以及使用Nginx+PHP基于它搭建https的Webservice. 之前的方式只是实现1:1的模式,昨天同事继续实现了n:1的模式,这里我再整理记录下. 由于n ...
- CORREL
CORREL Show All Returns the correlation coefficient of the array1 and array2 cell ranges. Use the co ...
- NOIP2011普及组 瑞士环 保序性
题目链接:http://noi.openjudge.cn/ch0401/4363/ 分析:如果直接模拟,时间复杂度是O(r*nlogn)超时 然后我们发现每次一轮开始时,刚开始是保序的,然后我们可以把 ...
- SQL Server查询性能优化——堆表、碎片与索引（二）
本文是对 SQL Server查询性能优化——堆表.碎片与索引(一)的一些总结. 第一:先对 SQL Server查询性能优化——堆表.碎片与索引(一)中的例一的SET STATISTICS IO之 ...
- 布隆过滤器(Bloom Filter)的原理和实现
什么情况下需要布隆过滤器? 先来看几个比较常见的例子 字处理软件中,需要检查一个英语单词是否拼写正确 在 FBI,一个嫌疑人的名字是否已经在嫌疑名单上 在网络爬虫里,一个网址是否被访问过 yahoo, ...
- Git提交引用和引用日志
转载自:https://github.com/geeeeeeeeek/git-recipes/wiki/5.5-Git%E6%8F%90%E4%BA%A4%E5%BC%95%E7%94%A8%E5%9 ...
- jsf服务器端验证用户输入
服务器端验证用户输入数据步骤 1 html页面上插入要输入数据控件 <h:inputText size="10" value="#{commodityBean.fo ...
- HDU3727 - Jewel(主席树)
题目大意 对一个序列进行以下四种操作: 1.Insert x 在序列尾部插入x 2.Query_1 s t k 查询区间[s,t]的第k小 3.Query_2 x 查询x的在序列中排名 4.Query ...