JS基础(上) JS与DOM的关系 JS的引入方式 变量的声明  常用方法 运算符问题 数组与对象的操作 Js的内置对象的使用 window对象 对象的操作

浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象

 

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>里的内容JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

 

BOM对象(把浏览器的地址栏,历史记录,DOM等装在一个对象)

浏览器内部有JS解释器/引擎;在html里的JS代码会被引擎所执行,执行的结果是对DOM对象的操作(即是对节点树内的标签进行操作)

JS添加特效 : 无非就是用JS操作DOM对象而已

 

JS的引入方式

JS代码可在html中任意位置编写,但浏览器解析代码是从上到下的,需注意此时html是否已经解析该标签,能让JS能否获取该DOM对象,所以有时会把代码放到html的结束前,即是</html>前

直接在html中编写 :<script type="text/javascript">代码</script> 

通过外部引用进来 : <script type=text/javascript src=””></script>

为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部

 

变量的声明 

var 变量名;变量名区分大小写;不用var声明会污染全局变量;变量名以字母、下划线、美元符号开头,后面部分可数字

函数 即 完成特定功能的代码段;

常用方法

输出语句到html中,使用document.write(“”)

Confire() :消息确认对话框;点击确认返回true

 

运算符问题

拼接运算符:+ , 如果是数字则相加,是字符则连接 ; 如2+3+‘love’+4+5 //输出5love45

和PHP不同,一般用.

 

逻辑运算符或 :返回为true的值 ; 如 : 

var a = 1;

var b = false;

var d = (a || b);  //d为1

 

逻辑运算符与 : 返回最后面的变量值

var a = 22;

var b=33;

alert(a && b); //输出33

 

数组与对象的操作

JS中数组的数字键值只能从0开始递增

注意  : 数组中括号,JS中length ; 对象用大括号

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

Js的内置对象的使用

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

 

 

 

 

window对象

window对象和JS没关系;是浏览的一个数组对象,供JS来操作。

Window.open()

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') </script>

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

作用域

情况1:函数内没找到该参数,会一直外部继续找,直到全局空间(函数外)寻找window属性

情况2:var声明变量;在函数内声明仅属于该函数内的局部变量。如果直接赋值,不加var(如:a=10)就会一直往外找该变量,找到则赋值给它,否则默认赋给window.变量名

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

 

 

找表标签对象

不会的方法到h3c查找HTML DOM 手册

方法名如果返回是集合则getElements ,如class,P等标签都不是唯一的所以s

id唯一返回对象,P等不唯一返回集合

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

根据id获取

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

根据标签找对象

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

 

对于表单元素,可以使用name寻找

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

按照类名查找

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

根据结点查找

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

 

 

对象的操作

img对象 下还有多个属性

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

img.src   img.style.width

 

注意 :

<div class="ch"> 中操作div对象的修改class名字属性用div.className = 

CSS样式与DOM : obj.style.width

CSS属性带横线则 去之首字大写 : border-top à obj.style.borderTop

注意 :此处获取宽高是把CSS内嵌,比较方便;并且返回的是字符串形式

实战 每次点击变颜色并且边框增大10像素

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

Object.style.display = none/block  实现隐藏和显示

Object.className = name 实现修改类名

 

获取内联样式属性

获取内存中在渲染的style的值,使用obj.currrentStyle() 和 window.getComputedStyle()获取

window.getComputedStyle(obj,伪元素)[arrt] : 

obj获取运算后的样式目标元素 ; 

伪元素 : 一般为null,可以修改为鼠标放上去的状态‘:active’

 

获取的值只读即是只能获取,不能直接修改,要修改还是要通过obj.style.属性 修改

内联样式一开始不能够获取是因为一开始没有定义内联定义,但是能够初始化赋值

获取的颜色返回是RGB形式的

 

注意:只有IE和Opera支持使用currentStyle获取HTMLElement的计算后的样式

标准浏览器使用getComputedStyle(),对此兼容性问题,使用封装进方法中进行判断使用哪个。obj即是对象名,arrt是获取属性名

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

对象的创建和删除 node.html

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

暴力结点 nodein.html

innerHTML 是结点的一个属性值,代表结点内的内容,即是某标签内的内容

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

级联菜单的制作 jilianorder.html

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

 

定时器的使用

不是js的内容属于浏览器的

setTimeout (表达式,延时时间) : 设置在延迟多少时间执行一次一个表达式

clearTimeout(名); 设置清除这个延迟器

 JS基础(上)
JS与DOM的关系
JS的引入方式
变量的声明 
常用方法
运算符问题
数组与对象的操作
Js的内置对象的使用
window对象
对象的操作

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;多次执行

clearInterval() 方法取消 setInterval() 的设置