/*
一、文档对象模型Document Object Model
DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API
*/
/*
注意事项
1. window对象作为全局对象
a. 所有全局属性、方法都存放在window下
2. DOM带有层级效果
a. Element: 表示一个元素
b. Text: 所有文本相关元素
c. Document: 整个文档
*/
/*
二、Web上的JavaScript
*/
// 1. Script元素
//<script type="text/javascript">
// <![CDATA[ --用来告诉支持XHTML的浏览器
// ]]>
//</script> // 2. Defer属性 --defer属性告诉浏览器加载完HTML文档以后再执行JS代码,但这个属性只能在IE下使用。 // 3. 连接外部脚 ---<script type="text/javascript" src="my-script.js"></script> // 4. JavaScript必备 --JavaScript有几种数据类型:Number, String, Boolean, Object, Undefined and Null。 // 5. Number --JavaScript里所有的Number都是浮点型
// 注:使用var类声明变量
var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide; // = 5000 // 6. String // 7. Boolean -- ===也是比较操作符,不仅比较数值,还比较类型 // 8. Function
(function () {
// 这里自调用函数
})(); // 9. Array
// 2种方式声明数组
// 字面量:
var fruit = ['apple', 'lemon', 'banana'];
// Array构造函数:
var fruit = new Array('apple', 'lemon', 'banana');
fruit[0]; // 访问第1个项(apple) // 10. Object --一个对象是一个key-value的集合
// 2种类型定义Object对象
// 字面量(大括号)
var profile = { name: 'Bob', age: 99, job: 'Freelance Hitman' };
// 使用Object构造函数
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman'; // 11. IF/Else语句
// 12. JavaScript操作符
// 13. Loop循环 /*
三、DOM正文
*/
// 1. 访问DOM节点
var introParagraph = document.getElementById('intro'); // 现在有了该DOM节点,这个DOM节点展示的是该信息段落
var allUnorderedLists = document.getElementsByTagName('ul'); // 'getElementsByTagName'返回的是一个节点集合// - 和数组有点相似 // 2. getElementsByTagName
// 访问无序列表: [0]索引
var unorderedList = document.getElementsByTagName('ul')[0];
// 获取所有的li集合:
var allListItems = unorderedList.getElementsByTagName('li');
// 循环遍历
for (var i = 0, length = allListItems.length; i < length; i++) {
// 弹出该节点的text内容
alert(allListItems[i].firstChild.data);
} // 3. DOM穿梭 --DOM查找节点
/*
1.Node.childNodes: 访问一个单元素下所有的直接子节点元素,可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点(比如text节点或其他元素节点)。
2.Node.firstChild: 与‘childNodes’数组的第一个项(‘Element.childNodes[0]‘)是同样的效果,仅仅是快捷方式。
3.Node.lastChild: 与‘childNodes’数组的最后一个项(‘Element.childNodes[Element.childNodes.length-1]‘)是同样的效果,仅仅是快捷方式。shortcut.
4.Node.parentNode: 访问当前节点的父节点,父节点只能有一个,祖节点可以用‘Node.parentNode.parentNode’的形式来访问。
5.Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
6.Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。
*/
/*
四、操作元素
*/
document.getElementById('intro').style.paddingTop = '10em'; //如果带有-的话,就需要去除padding-top ==> paddingTop
document.getElementById('intro').style["paddingTop"] // 使用[]来访问属性
// Node节点 --创建元素可以通过createElement方法,而创建text节点可以使用createTextNode
// 添加内容
var myIntro = document.getElementById('intro');
var someText = 'This is the text I want to add';
var textNode = document.createTextNode(someText);
myIntro.appendChild(textNode);
/*
五、Event事件
*/
// 1. 鼠标事件
/*
1. ‘mousedown’ – 鼠标设备按下一个元素的时候触发mousedown事件。
2. ‘mouseup’ – 鼠标设备从按下的元素上弹起的时候触发mouseup事件。
3. ‘click’ – 鼠标点击元素的时候触发click事件。
4. ‘dblclick’ – 鼠标双击元素的时候触发dblclick事件。
5.‘mouseover’ – 鼠标移动到某元素上的时候触发mouseover事件。
6. ‘mouseout’ – 鼠标从某元素离开的时候触发mouseout事件。
7. ‘mousemove’ – 鼠标在某元素上移动但未离开的时候触发mousemove事件。
*/
// 2. 键盘事件
/*
1.‘keypress’ – 按键按下的时候触发该事件。
2.‘keydown’ – 按键按下的时候触发该事件,并且在keypress事件之前。
3.‘keyup’ – 按键松开的时候触发该事件,在keydown和keypress事件之后。
*/
// 3. 表单事件
/*
1.‘select’ – 文本字段(input, textarea等)的文本被选择的时候触发该事件。
2.‘change’ – 控件失去input焦点的时候触发该事件(或者值被改变的时候)。
3.‘submit’ – 表单提交的时候触发该事件。
4.‘reset’ – 表单重置的时候触发该事件。
5.‘focus’ – 元素获得焦点的时候触发该事件,通常来自鼠标设备或Tab导航。
6.‘blur’ – 元素失去焦点的时候触发该事件,通常来自鼠标设备或Tab导航。
*/
// 4. 其它事件
/*
1.‘load’ – 页面加载完毕(包括内容、图片、frame、object)的时候触发该事件。
2.‘resize’ – 页面大小改变的时候触发该事件(例如浏览器缩放)。
3.‘scroll’ – 页面滚动的时候触发该事件。
4.‘unload’ – 从页面或frame删除所有内容的时候触发该事件(例如离开一个页面)。
*/
// 5. 事件处理
// <button onclick="return buttonClick()">Click me!</button> --这些处理函数都封装在单独的js文件
// 1. 基本事件注册
// <button id="my-button">Click me!</button>
// JavaScript:
var myElement = document.getElementById('my-button');
// 事件处理句柄:
function buttonClick() { alert('You just clicked the button!'); }
// 注册事件
myElement.onclick = buttonClick; //在事件名称前面添加前缀on作为DOM的属性就可以使用
// 2. 高级事件注册
function myEventHandler() { this.style.display = 'none'; }
// 正常工作,this是代表该元素
myIntro.onclick = myEventHandler;
// 正常工作,this是代表该元素
myIntro.addEventListener('click', myEventHandler, false); //绑定多个处理函数到一个事件上
/*
六、Event对象
*/
function myEventHandler(e) {
e = e || window.event; // 兼容IE的代码
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //取消默认的行为
} else {
e.returnValue = false; //取消默认的行为
//例如,当你点击一个连接的时候,默认行为是导航到href里定义的地址,但有时候你想禁用这个默认行为
}
}
// 事件冒泡 --事件在一个目标元素上触发的时候,该事件将触发一一触发祖先节点元素,直到最顶层的元素:
// 阻止冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
// 停止向上冒泡
if (e.stopPropagation) {
// W3C实现
e.stopPropagation();
} else {
// IE实现
e.cancelBubble = true;
}
}
// 使用我们自定义的addEvent函数将myParagraphEventHandler绑定到click事件上:
addEvent(document.getElementsByTagName('p')[0], 'click', myParagraphEventHandler);
// 事件委托 --将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。
// 如大表格,在每个<tr>上绑定点击事件,性能是个大问题
//
var myTable = document.getElementById('my-table');
myTable.onclick = function () {
// 处理浏览器兼容
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 测试如果点击的是TR就触发
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}
//依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那上面的代码就无法工作

javascript与DOM -- 深入理解javascript的更多相关文章

  1. JavaScript可否多线程? 深入理解JavaScript定时机制(转载)

    说明:最近写 js 时需要用setinterval函数做定时操作,谁知道,刚开始后运行完好,但一段时间后他就抽风了,定时任务运行的时间间隔越来越短,频率加快,这是一个完全不能容忍的问题,带着一个可以出 ...

  2. JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  3. JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  4. JavaScript 开发进阶:理解 JavaScript 作用域和作用域链(转载 学习中。。。)

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  5. accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

    程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...

  6. javaScript操作DOM深入理解

    做为一个web前端,处理和了解浏览器差异一个重要问题.下面将介绍本人在工作中的一些笔记总结,先介绍没有使用js库的情况. 1. setAttribute方法设置元素类名 : 在jQuery中,直接使用 ...

  7. 【JavaScript进阶】深入理解JavaScript中ES6的Promise的作用并实现一个自己的Promise

    1.Promise的基本使用 // 需求分析: 封装一个方法用于读取文件路径,返回文件内容 const fs = require('fs'); const path = require('path') ...

  8. [转]深入理解JavaScript系列

    文章转自:汤姆大叔-深入理解JavaScript系列文章 深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解Ja ...

  9. 深入理解JavaScript作用域和作用域链

    前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! ...

随机推荐

  1. C puzzles详解【26-30题】

    第二十六题(不会) The following is a simple program which implements a minimal version of banner command ava ...

  2. json传参应用

    json传参应用 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅 ...

  3. Linux下CPU占用率高分析方法

    一般解决方法是通过top命令找出消耗资源高的线程id,利用strace命令查看该线程所有系统调用1. 通过top命令找到可疑进程PID top - 09:37:18 up 70 days, 16:29 ...

  4. 设置Safari浏览器在标签栏上打开新窗口,而不是弹出一个新窗口

    打开Safari浏览器的偏好设置,如图: 打开“标签”一项,如上图.在“在标签(而不是窗口)中打开页面:”中设置.

  5. SQL SERVER中查询参数为空(null)时默认查询所有的实现

    最近在项目中碰到一个比较有意思的问题,网上查找了一些方法,在这里总结分享一下. 我们经常会碰到这样的场景:需要查询数据,有一些查询条件,但是查询的时候,我们希望在某个条件为空的时候,则不筛选这个条件, ...

  6. ngx_http_upstream_module模块学习笔记

    ngx_http_upstream_module用于将多个服务器定义成服务器组,而由proxy_pass,fastcgi_pass等指令引用 (1)upstream name  {...} 定义一个后 ...

  7. python encode decode unicode区别及用法

    decode 解码 encode 转码 unicode是一种编码,具体可以百度搜 # coding: UTF-8 u = u'汉' print repr(u) # u'\u6c49' s = u.en ...

  8. 推荐一个sqlce,sqllite等数据库管理工具

    推荐一个sqlce,sqllite等数据库管理工具 下载地址: http://fishcodelib.com/files/DatabaseNet4.zip 支持sqlserver,sqlce, sql ...

  9. 一步一步实现Linux设备驱动的Helloworld模块

    学了那么多程序语言,总是有一个Hello world开头,不禁感叹Hello world的强大.呵呵,废话少说,咋们的故事当然要从这个Hello world开始. 先查看自己OS使用的内核版本[don ...

  10. Spring框架中的IOC和DI的区别

    上次面试被问到IOC和DI的区别时,没怎么在意,昨天又被问到,感觉有点可惜.今晚总算抽点时间,查看了spring官方文档.发现,IoC更像是一种思想,DI是一种行为.为了降低程序的耦合度,利用spri ...