JS基础（上）

时间 2019-12-12

标签基础栏目 JavaScript 繁體版

原文原文链接

JS与DOM的关系

浏览器有渲染html代码的功能，把html源码（如div,p标签等）在内存里造成一个DOM对象javascript

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

HTML文档能够说由节点构成的集合，三种常见的DOM节点:java

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

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

3. 属性节点:元素属性，如<a>标签的连接属性href="http://www.imooc.com"。浏览器

BOM对象（把浏览器的地址栏，历史记录，DOM等装在一个对象）函数

浏览器内部有JS解释器/引擎；在html里的JS代码会被引擎所执行，执行的结果是对DOM对象的操做（便是对节点树内的标签进行操做）3d

JS添加特效：无非就是用JS操做DOM对象而已htm

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的内置对象的使用

window对象

window对象和JS不要紧；是浏览的一个数组对象，供JS来操做。

Window.open()

做用域

状况1：函数内没找到该参数，会一直外部继续找，直到全局空间（函数外）寻找window属性

状况2：var声明变量；在函数内声明仅属于该函数内的局部变量。若是直接赋值，不加var（如：a=10）就会一直往外找该变量，找到则赋值给它，不然默认赋给window.变量名

找表标签对象

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

方法名若是返回是集合则getElements ，如class，P等标签都不是惟一的因此s

id惟一返回对象，P等不惟一返回集合

根据id获取

根据标签找对象

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

按照类名查找

根据结点查找

对象的操做

img对象下还有多个属性

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像素

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是获取属性名

对象的建立和删除 node.html

暴力结点 nodein.html

innerHTML 是结点的一个属性值，表明结点内的内容，便是某标签内的内容

级联菜单的制做 jilianorder.html

定时器的使用

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

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

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

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

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