JS与DOM的关系

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

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

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

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() 的设置

JS基础（上）的更多相关文章

js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
js 基础
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
JS基础知识总结
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
js基础知识总结（2016.11.1）
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
Android 工程在4.0基础上混淆
Android现在对安全方面要求比较高了,我今天要做的对apk进行混淆,用所有的第三方工具都不能反编译,作者的知识产权得到保障了,是不是碉堡了. 一,首先说明我这是在4.0基础上进行的. 先看看pro ...
JavaScript学习笔记 - 进阶篇（1）- JS基础语法
前言 JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) JS进阶篇学习什么? 在JavaS ...
框架使用的技术主要是SpringMVC 在此基础上进行扩展
框架使用的技术主要是SpringMVC 在此基础上进行扩展 1 Web前端使用 2 前段控制器采用SpringMVC零配置 3 IOC容器Spring 4 ORM使用 Mybites或者hiberna ...

随机推荐

java 线程池（线程的复用）
一. 线程池简介 1. 线程池的概念: 线程池就是首先创建一些线程,它们的集合称为线程池.使用线程池可以很好地提高性能,线程池在系统启动时即创建大量空闲的线程,程序将一个任务传给线程池,线程池就会启动 ...
Python 3实现网页爬虫
1 什么是网页爬虫网络爬虫( 网页蜘蛛,网络机器人,网页追逐者,自动索引,模拟程序)是一种按照一定的规则自动地抓取互联网信息的程序或者脚本,从互联网上抓取对于我们有价值的信息.Tips:自动提取网页 ...
VS2015-MFC基础教程-应用程序工程中文件的组成结构
VS2015应用程序向导生成框架程序后,我们可以在之前设置的Location下看到此文件夹中包含了几个文件和一个以工程名命名的子文件夹,这个子文件夹中又包含了若干个文件和一个res文件夹,创建工程时的 ...
STM32之模拟串口设计
一.设计用途: 公司PCB制成板降成本,选择的MCU比项目需求少一个串口,为满足制成板成本和项目对串口需求,选择模拟一路串口. 二.硬件电路: 三.设计实现: 工具&软件:STM32F030R ...
学Python的第七天
今天学习DBA有点乏,所以Python学的不是很多熬!!! 但是不管多苦多累Python不会放弃!! 虽然我是运维! #!/usr/bin/env python3 # -*- coding:utf-8 ...
HTTP RESTful服务开发 spring boot+Maven +Swagger
这周配合第三方平台整合系统,需要提供HTTP REST服务和使用ActiveMQ推送消息,研究了下,做个笔记. 1.使用eclipse创建Spring Boot项目创建Spring Boot项目( ...
SPOJ - DQUERY （主席树求区间不同数的个数）
题目链接:https://vjudge.net/problem/SPOJ-DQUERY 题目大意:给定一个含有n个数的序列,有q个询问,每次询问区间[l,r]中不同数的个数. 解题思路:从左向右一个一 ...
tf.expand_dims
想要增加一维,可以使用tf.expand_dims(input, dim, name=None)函数 t = np.array(np.arange(1, 1 + 30).reshape([2, 3, ...
thinkphp 系统变量
一.查看可用变量 dump($_SERVER); 可以直接在html输出系统变量的值 <p>{$Think.server.HTTP_HOST}</p>. 二.环境变量 1.查看 ...
redis专题
1.Linux安装redis 2.redis持久化 3.redis配置 4.SpringBoot整合Redis发布订阅 5.redis事务 5.1.redis事务介绍 5.2. redisTempla ...

JS基础（上）