Javascript学习二

//imooc.com js学习

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

看下面代码:

<a href="http://www.imooc.com">JavaScript DOM</a>

//=======================================================

通过ID获取元素

学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:

 document.getElementById(“id”) 

看看下面代码:

结果:null或[object HTMLParagraphElement]

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

//=====================================================

innerHTML 属性

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

语法:

Object.innerHTML

注意:

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

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

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

结果:

//========================================

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 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>

结果:

要记得所有的style都要加双引号!!!

//==========================================

显示和隐藏(display属性)

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

语法:

Object.style.display = value

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

value取值:

看看下面代码:

//======================================================================================

控制类名(className 属性)

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

语法:

object.className = classname

作用:

1.获取元素的class 属性

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

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

结果:

时间: 2024-10-10 17:58:26

Javascript学习二的相关文章

javascript学习(二)

这一章主要是对javascript字符串,数值和日期的操作 一.字符串 1.查找一个字符串,indexOf(),和lastIndexOf() var str="to be ,or not to be"; var a=str.indexOf('to be'); var b=str.lastIndexOf('to be'); document.write("the first to be is in "+a+"<br>"); docume

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

javascript 学习小结 (二) by FungLeo

javascript 学习小结 (二) by FungLeo 前言 前面写过一个学习小结javascript 学习小结 JS装逼技巧(一) by FungLeo 那篇博文总结的东西还是比较多的. 但是JS有很多的内容,都是很有用的知识点,不可能一下子记住.因此,我的学习小结的会一直更新. 因为学习进度的不同,可能每篇博文的长短也不一样,有的学的东西多,就长点. 查询某个字符串在某个数组中的索引值 笨方法 我的基础比较差,所以很多东西是记不住的.因此,我在需要这样做的时候,我写了如下代码 var

JavaScript学习总结(十二)——JavaScript编写类

在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到的就是以下几种方式. 1.构造函数方式 用构造函数模拟"类",在其内部用this关键字指代实例对象. 基本语法: function 类名(){     this.属性名;//公共属性     var 属性名;//私有属性    /*凡是定义类的公共属性和公共方法都要使用this*/   

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

javascript学习4-练习之1转置矩阵

1.做了个小小练习,对矩阵进行转置和对不规则的二维数组进行行列互换(不规则二维数组不存在有转置矩阵一说).用以加深对二维数组的理解. 2.效果图如下: 3.两种方式的代码分别如下: 3.1规则矩阵转置: 1 //规则转置 2 var array2=[[1,2,3],[4,5,6]]; 3 var array22=new Array(); 4 array22[0]=new Array(2); 5 array22[1]=new Array(2); 6 array22[2]=new Array(2);

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应