javaScript知识体系（中）- DOMBOM其它内置对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript知识体系（中）- DOMBOM其它内置对象相关的知识，希望对你有一定的参考价值。
1. DOM基本概念
1.1 DOM
DOM Document Object Model 文档对象模型
就是把html文档模型化，当作对象来处理
DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。
1.2 内容概念
文档(Document)：就是指HTML或者XML文件
节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有
元素节点 属性节点 文本节点 注释节点
元素(Element)
HTML文档中的标签可以称为元素
1.3 结构概念
父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
2. 获取元素
getElementById("#id名"); /*该方法只能被document对象调用*/
getElementsByTagName("div"); /*通过标签名寻找一类元素（找到的是由元素对象组成的伪数组） 即可以被document调用，又可以被元素对象调用，被元素对象调用时表示在该元素对象内部执行查找 */
getElementsByClassName("div");
getElementByName();
nextElementSibling;
3. 设置属性
元素对象.属性名 = “属性值”;
<标签 属性名=”属性值”>
4. 绑定事件
事件三要素 事件源.事件 = function(){ 事件处理程序 };
等价于 <标签 事件=”事件处理程序”>
和对象方法一样，this指的还是调用该方法的对象
5. 禁止a标签的默认行为
onclick="return false;"
6. 常用属性
6.1 常用标签属性
DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style
其中className对应就是标签的class属性，但是由于class在JS中是关键字，所以变成了className
6.2 内部文本属性
innerHTML 获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上
innerText 获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版ff不支持，旧版本的IE支持）
textContent 获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版IE不支持，旧版本FF支持）
获取内部文本的方法封装
1 function getInnerText(element) { 2 if (typeof element.innerText === "string") { 3 return element.innerText; 4 } else { 5 return element.textContent; 6 } 7 } 8 function setInnerText(element, content) { 9 if (typeof element.innerText === "string") { 10 element.innerText = content; 11 } else { 12 element.textContent = content; 13 } 14 }
6.3 常用的表单属性
常见的表单元素属性有：
type、value、checked、selected、disabled
type可以设置input元素的类型
value可以设置input元素的值
checked可以设置input元素是否选中
selected 可以设置下拉列表select中的option是否被选中
disabled 可以设置input元素是否被禁用
文本框获取焦点和失去焦点
获取焦点事件是onfocus 失去焦点事件是onblur (不是所有的标签都有这个事件)
6.4 自定义属性
对象的自定义属性
可以像给对象设置属性一样，给元素对象设置属性
标签的自定义属性
可以通过getAttribute()和setAttribute()设置和获取标签属性，通过removeAttribute()移除标签的属性
正常浏览器中 HTML中有规定的属性 两种方式才可以相互设置和获取
总之用setAttribute设置的就用getAttribute获取 用对象的自定义属性设置的就用对象的自定义属性获取 以免出问题
6.6 获取焦点和失去焦点事件
onfocus();
onblur();
6.7 排他思想
7. 节点
7.1 节点类型node.nodeType
1表示元素节点 2表示属性节点 3表示文本节点 8表示注释节点
/*所有获取节点相关属性都没有兼容性问题*/
7.2 节点层次
childNodes //子节点
children //子元素 虽然不是早期DOM标准中的方法，但是所有浏览器都支持
nextSibling //下一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题
previousSibling//上一个兄弟节点
previousElementSibling //上一个兄弟元素 有兼容性问题
firstChild //第一个节点
firstElementChild //第一个子元素 有兼容性问题
lastChild //最后一个子节点
lastElementChild //最后一个子元素 有兼容性问题
parentNode //父节点 （一定是元素节点，所以无需处理）
8. 样式属性
style属性是对象，style对象的属性是字符串
style只能获取和设置行内样式
DOM对象中style的属性和标签中style内的值几乎一样
只是带有 - 的属性名较为特殊（如background-color变成了backgroundColor），因为在JS中 - 不能作为标识符
widh; height; padding; margin; display;
8.1 设置和获取样式
通过对象的style属性只能设置和获取行内样式
获取样式的时候 如果行内没有该样式 输出空字符串
设置样式的时候 赋的值是一个字符串 如果这个属性有单位 一定要节点加单位
8.2 什么情况通过class控制样式 什么情况通过style控制样式
不严格的说：
//如果样式很多 通过 直接控制类名 的方式加样式
//如果样式比较少 通过直接设置比较方便
严格来说：
//从标准的角度讲 即使是样式比较少的时候 设置样式也要用类名
//但是有一类情况 是无论如何也必须直接通过JS加的 那就是涉及到计算的时候
9. 动态创建表结构s
9.1. 插入和移除节点
在父元素中的最后追加子元素
father.appendChild(要追加的元素);
在父元素中的某个子元素前面插入子元素
father.insertBefore(要插入的元素,插到这个元素的前面);
从父元素中移除子元素
father.removeChild(要移除的子元素);
9.2. 动态创建结构
方式一：直接在文档中书写
document.write(“内容”)
方式二：改变元素对象内部的HTML
innerHTML=”内容”
方式三：创建或克隆节点并追加
createElement();
cloneNode();
通过这两种方法创建出来的元素只是保存在内存中，必须放到页面上才行!
9.3. 动态创建结构（效率问题）
把字符串变为文档对象
把当前对象挂接到DOM树上
渲染引擎根据新的DOM树重新渲染
10. js加强
10.1 函数的两种定义方式
10.2 变量的作用域
10.3 没有块级作用域
10.4 作用域链
10.5 先找var 在找function
10.6 递归
能不用递归尽量不用递归 递归非常消耗资源
我们一般用递归的情况也不多 但是回调就很常用了
10.7 函数也是一种数据
console.log(fn6.name);//函数名
console.log(fn6.length);//形参个数
console.log(fn6.arguments);//实参列表
JS没有重载
但是通过arguments可以模拟重载
1 function getMax(a, b, c) { 2 if (getMax.arguments.length === 2) { 3 return a > b ? a : b; 4 } 5 if (getMax.arguments.length === 3) { 6 return (a > b ? a : b) > c ? (a > b ? a : b) : c; 7 } 8 }
10.8 回调
10.9 sort原理
1 function sort(arr, fn) { 2 for (var i = 0; i < arr.length - 1; i++) { 3 var flag = true; 4 for (var j = 0; j < arr.length - 1 - i; j++) { 5 if (fn(arr[j], arr[j + 1]) > 0) { 6 var temp = arr[j]; 7 arr[j] = arr[j + 1]; 8 arr[j + 1] = temp; 9 flag = false; 10 } 11 } 12 if (flag) { 13 break; 14 } 15 } 16 return arr; 17 }
10.10 判断数据类型
typeof 变量 //判断这个变量是什么数据类型的
instanceof----作用:判断这个对象是不是这个类型的-----返回值
10.11 对象的第三种创建方式
1.开辟空间,存储新创建的对象
2.把this设置为当前的对象
3.设置该构造函数中的属性和方法的值
4.返回当前创建好的对象
1 function Student(name,sex,age) {//name就是名字,//sex--性别,age---年龄 2 //设置属性和方法的值,不需要new Object();不需要返回值 3 //对象直接用this 4 //this.name是对象的属性,后面的name是用户传的参数 5 this.name=name;//名字 6 this.age=age; 7 this.sex=sex; 8 this.sayHi=function () { 9 console.log("阿涅哈斯诶呦!"); 10 console.log("我的名字:"+this.name+"性别"+this.sex+"年龄"+this.age); 11 }; 12 } 13 //创建对象 14 var stu=new Student("小明","男",18); 15 stu.sayHi();
10.12 json数据格式
JSON格式的数据都是键值对,这些键值对,键---是字符串,值----字符串
遍历
for循环遍历的是有一定长度的数据（数组）
for-in循环---主要遍历的就是对象---键值对 （对象）
10.13 基本包装类、值类型、引用类型
基本类型---值类型---String Undefined Number Boolean Null
复杂类型---引用类型--Object 数组--Array,Date.....
基本类型的值存储在----栈中
复杂类型的地址(引用)存储在栈中,---地址指向的空间中的对象(对象)---存储在堆中
创建对象并返回对象---返回的是对象的地址(对象在堆空间中的地址)
基本类型传值的时候，传递的是 值
复杂类型(引用类型)传递的时候,传递的是:地址(引用)
10.14 数组方法
1 isArray();这个方法是判断变量是不是数组 2 toString();这个方法是转字符串类型 3 join();这个方法可以把数组中每个元素按照分隔符的方式转换成字符串返回 4 push();追加元素的 5 pop();//删除数组中最后一个元素,返回值是被删除的这个元素 6 shift();这个方法删除数组中的第一个元素,返回值就是被删除的元素 7 unshift();这个方法向数组中第一个元素之前插入一个新的元素(或者是插入多个元素),返回值是数组的新的长度 8 find();在某个数组中查找满足条件的元素,找到则返回该元素，找不到则返回undfined 9 concat();//新的数组和旧的数组拼接,产生一个新的数组 10 slice();可以从原来的数组中截取出来指定的一部分元素，产生新的数组 11 splice();第一个参数是开始的下标,第二个参数是要替换的个数；可以有第三个参数，第四个参数.......；该方法返回的是一个数组,如果没有替换则返回空数组. 12 indexOf();ES5,查找某个元素，第一个参数是要查找的元素,第二个参数是开始查找的下标,找到了则返回该元素的索引，找不到则返回-1 13 lastIndexOf();ES5,这个方法也是查找元素,从后面向前面找,找到则返回对应的下标,找不到则返回-1,序号规则是按照数组中的元素的序号顺序进行返回 14 >>>>>下面几种方法，ES5，都是在遍历数组中的每一个元素，并且利用回调函数处理数组中的每一个元素，所有的回调函数都是采用（数据项，序号）的方式调用 15 arr.every(fn(v,i){});ES5,传入一个函数,判断每个数组中的元素是否满足条件,如果都满足在回调函数中则返回true，有一个不满足条件的则返回false。 16 arr.some(fn(v,i){});ES5, 传入一个函数,判断每个数组中的元素是否满足条件,如果都不满足在回调函数中则返回false，有一个满足条件的则返回ture。 17 arr.map(fn(v,i){});ES5,map这个方法可以传入一个回调函数。比如直接传入了一个Math.sqrt方法,sqrt方法是为某个数字开平方的,调用map方法传入Math.sqrt的时候,去掉了括号,也没有传入参数(map方法内部帮我们遍历并且传入数组的每个元素) 18 arr.filter(fn(v,i){}); ES5，变量数组中每一个元素，并且按照某个要求去判断该元素是否符合要求，如果符合，那么回调函数返回true，如果不满足，回调函数返回false，该方法会将返回true的元素组织起来构成一个新的数组。全为false返回空数组 19 arr.ForEach(function(v,i){}); ES5，单纯的循环操作。没有返回值，也没有跳出，这样的循环就是迭代。
10.15 js中的内置对象
ES:Number, Boolean, String, Math, Array, Date, Error, RegExp, Object, Function---系统自带的就是内置对象
BOM: window, document, history, location...
DOM: html, body, div, ...
10.15.1 js中的内置对象Date();
var dt=new Date();//显示的是星期，月份，年份，小时，分钟，秒
var dt=Date.now();//毫秒---为了进行计算
var dt=+new Date();//毫秒
两种格式的日期转换
console.log(dt.valueOf());//显示的是毫秒
var dt=new Date(1471769122820); //显示年份等
10.15.2 js中的内置对象Math();
1 console.log(Math.max(1,2,3,4,5));//这些数字中的最大值 2 console.log(Math.min(1,2,3,4,5));//返回多个数中的最小值 3 console.log(Math.floor(45.84334));//向下取整 4 console.log(Math.ceil(5.4443));//向上取整 5 console.log(Math.round(67.55));//四舍五入 console.log(Math.random());//随机数0-1 6 console.log(parseInt(Math.random()*10+1)); //随机数1-10 7 console.log(parseInt(Math.random()*100+1)); //随机数1-100 8 console.log(Math.abs(-100));//返回绝对值 9 console.log(Math.pow(4,3)); //4的3次幂 10 console.log(Math.sqrt(16)); //开平方 11 console.log(Math.sin(4));//返回正弦值
10.16 基本包装类
1.基本类型不能直接调用属性和方法
2.对象可以直接调用属性和方法
10.16.1 字符串
属性:length,获取字符串的长度
方法:
charAt(下标);获取该下标位置的字符串
charCodeAt(下标);获取对应下标字符串的ASCII的码值
concat(字符串);拼接字符串的
slice(开始下标,结束下标);截取一段字符串的
substring(开始的下标,结束的下标);截取指定部分的字符串
substr(开始的下标，截取的个数);截取指定长度的字符串
toLocaleUpperCase 字符串转大写
toLocaleLowerCase 字符串转小写
indexOf 查找指定的字符串，找到则返回下标，找不到返回-1
lastIndexOf 从后面向前面找指定的字符串，找不到也是返回的是-1
trim 切掉字符串前面和后面的空格
split 切割指定的字符串的，返回的是一个数组
replace 替换指定的字符串，返回的是一个新的字符串
11. BOM 浏览器对象模型
DOM:中的顶级对象是document----太监(大总管)
BOM:中的顶级对象是window------皇上
整个浏览器就是window,页面中的document也属于window
变量,函数,对象都属于window
但是:写代码的时候,window可以直接省略
11.1 弹出对话框
1 if(window.confirm("你确定要退出吗?")){ 2 //执行到这里,证明用户点击了确定按钮 3 console.log("点击了确定"); 4 }else{ 5 //证明了用户点击了取消的按钮 6 console.log("点击了取消"); 7 } 8 window.prompt("请输入用户名");
11.2 一个很重要的属性 location.href
location.href是一个属性.可以跳转到指定的页面
11.3 BOM的一些方法
1 win=window.open("09test.html","_blank","width=200,height=200,top=100,left=100,resizable=no"); 2 win.close();//此时close方法 无论open中第一个参数是不是地址都可以关闭窗口 3 win.moveTo(300,300);//把新打开的窗口移动到距离左侧和上面300px 4 win.moveBy(20,20);//每次移动20px 5 win.resizeTo(400,400);//窗口的大小发生了改变 6 win.resizeBy(40,40);
11.4 计时器
setInterval 计时器,该计时器返回来的是该计时器的id
参数:
1.---要执行的函数
2.---时间:1000毫秒----
返回值:是当前这个计时器的id
clearInterval 销毁计时器的,需要的参数就是计时器的id
setTimeout(function () {alert("啊!....."); },1000);
clearTimeout(timeId);
11.5 location对象
1 console.log(window.location.hash);//获取地址栏中有#后面的内容 2 console.log(window.location.host); 3 console.log(window.location.hostname); 4 console.log(window.location.pathname); 5 console.log(window.location.port); 6 console.log(window.location.protocol); 7 console.log(window.location.search); 8 location.href="";-------属性 9 location.assign("http://www.baidu.com");//---方法 10 location.replace("http://www.baidu.com");//---方法----地址不会记录到历时中----后退点不了 11 location.reload();//刷新的---一般情况在页面中谁不会来一个按钮点一下刷新
11.6 navigator对象
console.log(window.navigator.userAgent);
console.log(window.navigator.platform);
11.7 history对象
window.history.forward();
window.history.back();//后退
12. js特效
12.0 事件
1 document.getElementById("txt").onkeydown=function (e) { console.log(e.keyCode); }; 2 window.onresize=function () { 3 if (document.body.clientWidth>960) { 4 console.log("您用的是电脑浏览的该页面"); 5 }else if(document.body.clientWidth>500){ 6 console.log("您用的是平板浏览的该页面"); 7 }else{ 8 console.log("您用的是手机浏览的页面"); 9 } 10 } 11 }; // 判断浏览器窗口大小 12 document.onclick=function (e) { 13 document.title = e.screenX+"==="+e.screenY; //screenX和screenY是相对于屏幕的左上角 14 console.log(e); 15 }; 16 screenX和screenY是相对于屏幕左上角的坐标 17 e.button是鼠标左右键和滚轮的值 18 e.keyCode 是获取用户按下的是哪一个键盘中的键 19 e.shiftKey 判断用户是否按下了shift键 20 this是当前触发事件的对象 21 target是事件源对象-----源头---IE8中不支持 22 window.event.srcElement是事件源对象----源头---谷歌支持
12.1 获取图片宽高
window.onload = function(){var imgWidth = img.width;}; // 等页面加载之后获取
1---如果希望页面加载后就执行做一些事件:比如直接获取图片的宽度或者高度,那么可以把代码直接写入到onload中
2----onload事件到底是什么时候执行:页面中的所有的文字，标签，图片，全部加载后才执行
12.2 获取图片宽高
window.onbeforeunload=function () { alert("您确定要关闭当前页面吗?"); };
window.onunload=function () {alert("页面已经关闭了"); };
12.3 图片跟着鼠标飞
1 document.onmousemove=function (e) { 2 e=e||window.event; // 兼容代码 3 document.title=e.clientX+"==="+e.clientY; // clientX和clientY----事件参数获取 4 imgObj.style.position="absolute"; 5 imgObj.style.left=e.clientX+"px"; 6 imgObj.style.top=e.clientY+"px"; 7 imgObj.style.left=e.pageX+"px";//pageX--包含可视区域的横坐标和隐藏区域 8 imgObj.style.top=e.pageY+"px";//pageY---包含可视区域的纵坐标和隐藏区域 9 }； 10 注意： 11 1.如何获取某个事件处理的函数中的参数:arguments.length 12 arguments---是一个对象,可以看成是一个数组 13 2.获取可视区域的横纵坐标: 14 > 事件参数.clientX和事件参数.clientY 15 > 事件参数:就是某个事件处理的函数中传入的参数: 16 > 事件参数可以使用arguments[0]来代替 17 IE8中事件处理的函数中没有参数,如何在IE8浏览器中用到这个事件参数? 18 答:window.event 19 解决事件参数兼容问题: 20 e=e?e:window.event;或者e=e||window.event; 21 > 图片能够跟着鼠标移动是设置了图片的left和top分别等于clientX和clientY 22 clientX和clientY是获取的可视区域的横纵坐标 23 > 如果页面有滚动条了,此时卷出去的区域应该用pageX和pageY 24 > e.type来获取事件的类型(没有on)
12.4 模拟多人开发注册事件
1 function addEvent(element,eventName,fn) { 2 var oldEvent=element["on"+eventName]; 3 if(oldEvent==null){//表示该事件没有处理函数 4 element["on"+eventName]=fn;//注册事件了 5 }else{ 6 //有事件了---先调用原来的事件,再重新注册新的事件 7 element["on"+eventName]=function () { 8 //调用原来的事件-注册新的事件 9 oldEvent(); 10 fn(); 11 }; 12 } 13 }
12.5 注册多个事件（重要）
三种注册事件的方式:
1 对象.on事件名字=事件处理函数;
2 对象.addEventListener("事件的名字",事件处理函数,false);
3 对象.attachEvent("on事件的名字",事件处理函数);
注册事件方式的区别:
1.btnObj.onclick=fn;这种方式任何浏览器都支持
2.btnObj.addEventListener();谷歌和火狐浏览器支持
3.btnObj.attachEvent();IE8支持
同一个元素同时注册多个相同的事件，addEventListener和attachEvent区别:
前者三个参数,后者两个参数
前者第一个参数是事件的名字，没有on
后者第一个参数是事件的名字,有on
addEventListener方法中第三个参数如果是false则是事件冒泡,如果是true则是事件捕获
12.6 移除事件
注册事件有三种方式:
移除事件有三种方式:
1. 对象.on事件的名字=null
举例子: btnObj.onclick=null;
2. 对象.removeEventListener("事件的类型",该事件对应的处理函数的名字,false);
举例子: btnObj.removeEventListener("click",f1,false);
3. 对象.detachEvent("on事件的类型",改时间对应的处理函数的名字);
举例子: btnObj.detachEvent("onclick",f1);
12.7 为任意的一个元素注册任意的事件的兼容函数和移除事件
1 var eventArg = { 2 myAddEventListener: function (element, eventName, fn) { 3 //判断注册事件的方法是否存在----当前浏览器是否支持这种写法 4 if (element.addEventListener) {//谷歌和火狐 5 element.addEventListener(eventName, fn, false); 6 } else if (element.attachEvent) {//IE8 7 element.attachEvent("on" + eventName, fn); 8 } else { 9 element["on" + eventName] = fn; 10 } 11 }, 12 myRemoveEventListener: function (element, eventName, fn) { 13 if (element.removeEventListener) {//谷歌和火狐 14 element.removeEventListener(eventName, fn, false); 15 } else if (element.detachEvent) {//IE8 16 element.detachEvent("on" + eventName, fn); 17 } else {//所有浏览器都支持 18 element["on" + eventName] = null; 19 } 20 } 21 };
12.8 this
如果通过addEventListener注册事件,该事件中的this就是当前的触发事件的对象
如果是按钮注册点击事件,点击的时候this就是按钮对象
如果通过attachEvent注册事件,该事件中的this是window对象====IE8中
12.9 事件冒泡
12.9.1 事件冒泡解析
事件冒泡:
有一个元素A,在A元素内又有一个元素B,此时A和B都注册了相同的事件，如果B的事件被触发了,那么此时A元素对应的事件也会被触发。
12.9.2 事件冒泡阶段
捕获阶段-------1
目标阶段-------2
冒泡阶段-------3
12.9.3 事件冒泡阶段判断
通过事件参数--e.eventPhase 可以获取当前事件经历的是什么阶段
如果是1则是捕获阶段
如果是2则是目标阶段:第一次点谁谁就是目标
目标阶段之后就是冒泡阶段
以上是结合第三个参数是false的情况而言
另一种情况:第三个参数是true的时候,只有捕获阶段和目标阶段
先捕获,然后再目标
一般网页中都是有事件冒泡的,一般情况我们不用捕获
12.9.4 阻止事件冒泡
两种方式:
第一种:方法 e.stopPropagation();
第二种:属性 window.event.cancelBubble=true;
13. 高清放大镜
1 small.onmousemove=function (e) { 2 var w=e.pageX-mask.offsetWidth/2; 3 var h=e.pageY-mask.offsetHeight/2; 4 var x=w-100; 5 var y=h-100; 6 x=x<0?0:x; 7 y=y<0?0:y; 8 x=x>this.offsetWidth-mask.offsetWidth?this.offsetWidth-mask.offsetWidth:x; 9 y=y>this.offsetHeight-mask.offsetHeight?this.offsetHeight-mask.offsetHeight:y; 10 mask.style.left=x+"px"; 11 mask.style.top=y+"px"; 12 //按比例移动图片;遮挡层移动的距离/图片的移动距离=遮挡层最大移动距离/图片的最大移动距离--->图片移动的距离=遮挡层移动的距离*图片的最大移动距离/遮挡层最大移动距离 13 var maxMaskMove=this.offsetWidth-mask.offsetWidth;//遮挡层移动最大距离 14 var maxImgMove=img.offsetWidth-big.offsetWidth;//图片移动最大距离 15 var imgMoveLeft=x*maxImgMove/maxMaskMove; 16 var imgMoveTop=y*maxImgMove/maxMaskMove; 17 //设置图片的移动 18 img.style.marginLeft=-imgMoveLeft+"px"; 19 img.style.marginTop=-imgMoveTop+"px"; 20 };
13.1 隐藏的问题
在style标签中设置宽 高 left top通过style.属性都是获取不到
在style属性中设置宽 高 left top通过style.属性都是可以获取到的
console.log(document.getElementById("dv").style.left);
console.log(document.getElementById("dv").);
如何获取
console.log(document.getElementById("dv").offsetLeft);
console.log(document.getElementById("dv").offsetTop);
涉及内容
offsetHeight; offsetWidth;
e.pageX; e.pageY;
名称.style.left;
14. offset的内容
总结:
1. 如果在行内样式设置元素的宽和高，那么dvObj1.style.width可以获取宽和高
2. 如果在style标签中设置元素的宽和高,那么dvObj1.style.width不能获取元素的宽和高
3. 如果元素的样式是在style标签中设置的宽和高,如果想要获取,用offsetWidth或者是offsetHeight,这里是包括边框的宽度
4. offsetWidth获取到的是数字类型,没有px,只读的(只能获取)
5. style.width获取到的是字符串类型,有px,可读可写(可以获取也可以设置)
6. 以后在页面中获取元素的宽和高....用offsetWidth或者offsetHeight
7. 如果是设置呢:divObj.style.width
8. 如果想要获取页面中的元素距离左侧和上面的像素，用的是offsetLeft和offsetTop
9. offsetLeft：父级元素的border的宽度+父级元素的margin-left；还要有自身的margin-left,还要有父级元素的padding-left
10. 如果父级元素脱离了文档流,此时,当前的这个元素的offsetLeft没有了父级元素的border的宽度了
11. 如果自身脱离了文档流,自身的offsetLeft就是自身的border左边到body的左边的像素
12. 如果自身和父级元素同时脱离了文档流,此时的offsetLeft是父级元素border右边到自身的border的左边
13. 如果自身和父级元素同时脱离了文档流,此时的offsetLeft是父级元素border右边到自身的border的左边，如果在自身的style属性中设置了margin-left,也要加上
15. scroll的内容
scrollHeight:文本内容的高度
scrollWidth:文本内容的宽度
width和height和scrollHeight及scrollWidth没关系的(没有内容一致)
scrollTop:竖着的滚动条拉动后,文本出去的高度
scrollLeft:横着的滚动条拉动后,文本出去的内容
1 function scroll() { 2 return { 3 left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, 4 top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 5 }; 6 }
16. 获取页面中的几个特殊元素
1 console.log(document.title);//获取title标签中的字符串内容 2 console.log(document.body);//body对象 3 console.log(document.html);//undefined------获取不到 4 console.log(document.documentElement);//获取html标签对象 5 pageY---pageX 6 e.pageY=(document.body||document.documentElement).scrollTop+e.clientY 7 document.onclick=function (e) { 8 console.log(e.clientY); 9 console.log(e.pageY); 10 console.log(window.event.clientY); 11 console.log(window.event.pageY);//ie8中没有值 12 document.documentElement.scrollTop; //在谷歌歌浏览器不支持,IE8中支持 13 document.body.scrollTop; //在谷歌中支持,IE8中不支持 14 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 15 };
17. 动画函数封装（js）
1 //根据id获取对应的元素 2 function my$(id) { 3 return document.getElementById(id); 4 } 5 /* 6 * element---任意的元素 7 * attr---属性 8 * */ 9 function getAttrValue(element,attr) { 10 return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0; 11 } 12 /* 13 * element----要移动的元素 14 * target----移动的目标 15 * 初级版本 16 * */ 17 function animate1(element,target) { 18 clearInterval(element.timeId); 19 element.timeId=setInterval(function () { 20 //获取当前的位置 21 var current=element.offsetLeft; 22 //每次移动多少步 23 var step=(target-current)/10;//(目标-当前)/10 24 step=step>0?Math.ceil(step):Math.floor(step); 25 current=current+step; 26 element.style.left=current+"px"; 27 if(current==target){ 28 clearInterval(element.timeId); 29 } 30 console.log("target:"+target+"current:"+current+"step:"+step); 31 },10); 32 } 33 /* 34 * 终版动画函数 35 * */ 36 function animate(element,json,fn) { 37 clearInterval(element.timeId); 38 element.timeId=setInterval(function () { 39 var flag=true;//假设都达到了目标 40 for(var attr in json){ 41 if(attr=="opacity"){//判断属性是不是opacity 42 var current= getAttrValue(element,attr)*100; 43 //每次移动多少步 44 var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改 45 var step=(target-current)/10;//(目标-当前)/10 46 step=step>0?Math.ceil(step):Math.floor(step); 47 current=current+step; 48 element.style[attr]=current/100; 49 }else if(attr=="zIndex"){//判断属性是不是zIndex 50 element.style[attr]=json[attr]; 51 }else{//普通的属性 52 //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型 53 var current= parseInt(getAttrValue(element,attr))||0; 54 //每次移动多少步 55 var target=json[attr];//直接赋值给一个变量,后面的代码都不用改 56 var step=(target-current)/10;//(目标-当前)/10 57 step=step>0?Math.ceil(step):Math.floor(step); 58 current=current+step; 59 element.style[attr]=current+"px"; 60 } 61 if(current!=target){ 62 flag=false;//如果没到目标结果就为false 63 } 64 } 65 if(flag){//结果为true 66 clearInterval(element.timeId); 67 if(fn){//如果用户传入了回调的函数 68 fn(); //就直接的调用, 69 } 70 } 71 console.log("target:"+target+"current:"+current+"step:"+step); 72 },10); 73 }
总结三大系列
clientX clientY clientWidth clientHeight
pageX pageY pageWidth pageHeight
offsetLeft offsetTop offsetWidth offsetHeight
18. 正则表达式
18.1 正则表达式中的基本元字符
. 通配符（. 除了\n以外的任意一个内容）
[]表示的是范围:表示的是范围中的任意一个
[0-9]表示的是:0到9之间(包含)任意一个数字
[a-z]表示所有的小写字母中的一个
[A-Z]表示的是所有的大写字母中的任意一个
[a-zA-Z]表示的是所有的字母中的任意一个
[9]表示的就是9
[o]o
[0-9a-zA-Z]表示的是任意的一个数字或者任意的一个字母
()表示的是分组(为了更明确这个正则表达式的意思),提升优先级,组号从左往右数圆括号
| 表示的是或者的意思
[0-9]|[a-z] 0-9之间的任意一个数字或者是小写字母中的任意一个字母
* 表示的是该符号前面的表达式出现了0次到多次
+ 表示的是该符号前面的表达式出现了1次到多次
? 表示的是该符号前面的表达式出现了0次到一次
{} 表示的是前面的表达式出现了多少次,具体是多少次:大括号中的写法
18.2 数字 字母 特殊符号
\d 表示的是任意的一个数字和[0-9]一样
\D 表示的是非数字
\s 空白符号
\S 非空白符号
\w 非特殊符号
\W 特殊符号
18.3 之前的元字符 都是不严格的匹配字符串
^:1.以什么内容开头,必须以什么开始
2.取反
用法:
^[0-9] 必须以数字开头
^[a-z0-9] 必须以数字或者以小写字母开始
^[0-9a-zA-Z] 必须以数字或者是字母开头
^\d 必须以数字开头
[^0-9]取反 字母或者特殊符号
[^0-9a-zA-Z] 特殊符号
$ :必须以什么内容结尾
[0-9]$ "hsgd7y273d9"
[a-zA-Z]$
^[0-9a-z][a-z]$
18.4 在js中正则表达式的写法:/正则表达式/
创建正则表达式对象的方式:
1. var reg=new RegExp(/正则表达式/
2. var reg=/正则表达式/; reg.test("hello998");
3. /正则表达式/.方法名(参数);
18.5 字符串中方法的使用
str=str.replace(/帅/g,"呆"); //g表示的是全局 //i 表示的是小写的
str=str.replace(/^\s+|\s+$/g,"");
while((index=reg.exec(str))!=null){console.log(index.index); } // 如果结果为null没有匹配的
如果匹配到了数据，那么返回值是数据，如果没有匹配到，返回null
var result=str.match(/帅/g); // match根据正则表达式匹配字符串中的内容,如果没有g,匹配的是第一个,如果有g匹配的是全局的
以上是关于javaScript知识体系（中）- DOMBOM其它内置对象的主要内容，如果未能解决你的问题，请参考以下文章