DOM总结

1:DOM - document object model 文档对象模型

作用：给我们提供了一些方法，让我们可以操作页面.

2: 获取标签对象的方式.

2.1:根据id名获取元素

 console.log(document.getElementById("box"));

使用document.getElementById()获取元素失败时结果为null

注意：获取位置，如果在head中书写js代码获取元素，需要考虑标签 是否生成

2.2:根据标签名获取元素.

getElementsByTagName("div"),得到的是伪数组,要么遍历,要么给具体的 索引值.

3: js的入口函数.

window.onload = function () { };

作用：在入口函数内书写的代码会在页面完全加载(引入的文件,结构,图片,文件)后执行.

4:对标签进行样式设置操作

标签.style , 然后再访问具体的某个样式名

书写样式时，在css中加-的样式名，例如background-color，在js中需要将-去掉，并将后半部分的首字母大写

// font-size fontSize z-index zIndex

box.style.backgroundColor = "red";

5:文本操作.

标签.innerHTML

Innerhtml既可以设置文本,也识别标签.

6:DOM - 文档对象模型

前面我们说过只有对象才有属性和方法

通过观察我们发现,样式和文本操作均为通过属性的形式

使用DOM操作的标签以及其他内容均为对象形式

7:js中的事件:

js中的事件同样也是由三个部分组成

1 事件源(触发事件的元素)(被动)

2 事件类型(例如点击,鼠标移入)

3 事件处理程序(函数类型)

语法形式:

事件源.事件类型 = function(){

事件处理程序，当事件触发后，执行内部的所有代码;

}

8:操作标签自身支持的行内属性(id/title/class).

1:获取: 标签名.属性名 iv.id

设置: 标签名.属性名 = ”属性值”div.className = “current”

但是class比较的特殊,因为class是关键字,所以换成了className.

2:通过 标签.className = “abc” 设置的时候,需要将以前的类名带上,不然就会删除以前的类名了.

9:标签行内自定义属性的操作方式,无法通过标签.属性名的方式操作.

既可以设置标签行内的自定义属性,也可以设置标签自身支持的的行内属 性.但建议仅仅用作标签的行内自定义属性.

1 获取 标签.getAttribute(属性名);

console.log(box.getAttribute("hehe"));

console.log(box.getAttribute("id"));

2 设置 标签.setAttribute(要修改的属性名,修改成什么值)

box.setAttribute("hehe", "b");

3 移除 标签.removeAttribute(要移除的属性名)

box.removeAttribute("hehe")

box.removeAttribute("id").

10:事件内部的代码仅仅点击才执行,晚于页面的加载.其他加载完才执行.

解决方法:

1:自调用函数:

自调用函数(立即执行函数)的功能：

1 用于包裹作用域(模拟块级作用域).

2 减少全局变量的使用.

var lis = document.getElementsByTagName("li");

for (var i = 0; i < lis.length; i++) {

    (function () {

  var j = i;

  lis[i].onclick = function () {

    console.log(j);

  };

})();

}

2:给DOM对象添加自定义的属性.(对象名.属性)

3:给标签添加行内的自定义属性.(setattribute/getAttribute/removeAttribute).

---------------------------------------------第二天------------------------------------------------------

11:DOM第二天有总结.

12:阻止默认的a标签的跳转,要在后面设置 return false.

Return false 可以阻止默认跳转.

13:鼠标的移入移出事件:

鼠标移入事件: onmouseover.

鼠标移出事件: onmouseout.

14:焦点事件:

onfocus 获取焦点事件：点击输入框时，光标在框内跳动

onblur 失去焦点事件：点击输入框以外，光标不跳到触发

15:表单操作内容，自带value属性，所以操作内容时直接使用value即可.

Input表单的默认值 value属性.

16:在所有表单的表单中,仅仅下拉菜单select的默认文本为innerHTML,其他的均为value.

17: 复选框是否选中 checked

checked 设置值为bool值，如果值为true，表示选中，false表示取消选中

注意点(不常用):如果设置的值不是bool值会进行隐式转换操作

cb.checked = "hehehe";

cb.checked = false;

-------------------------------------------第三天-------------------------------------------------

18:为什么会有兼容问题:

js中有许多的功能，但是某些功能无法在所有的浏览器中同时执行

针对这些功能，需要进行兼容性操作。

21: 文本操作.(都是属性)

Innerhtml 即可以生成文字,也可以生成标签

如果我们要给一个标签内部设置大量的文字信息，同样会进行内部的标签检索操作.

纯文本的设置:

①:innerText: IE提出的,兼容IE.

②:textcontent: 标准属性,但是低版本的IE(IE6/7/8)不支持.

22:ie总是出现兼容性的原因

1 浏览器升级麻烦

2 系统升级更麻烦

导致了ie会有多个版本同时在市面上存在，我们在书写代码时需要考虑到可能额会出现的兼容性问题，保证最大化的用户使用

23:能力检测:

检测当前这个功能是否可以使用，能用则用(看你行不行).

24:文本设置的兼容性:

先随意找到其中一个属性，进行使用，查看使用结果，可以用就用，不能用的话换另一个即可

if (typeof box.innerText == "string") {

//如果获取到了内容，为字符串，但是取值可能为空，所以直接利用隐式转换的方式不太严谨

box.innerText = "我是innerText设置的内容";

} else {

//不支持innerText，可以使用textContent

box.textContent = "我是textContent设置的内容";

}

25:通过style设置/获取的样式,仅仅是在行内显示,但是并不是所有的样式都是在行内.所有必须要通过其他的方式来获取样式.

①:getComputedStyle(). 获取计算后的样式(获取的样式值是标签最终生效的那个样式值). 标准方法,但是不兼容低版本的IE(IE6/7/8);

getComputedStyle(DOM对象).属性名 getComputedStyle(box, null).width

参数2，一会儿再说，先写一个null

获取结果为对象形式，是当前标签所有样式的集合

注意，此方法只可以进行样式值的获取，结果只读不可设置,结果为字符串，带单位

②: 标签.currentStyle IE自身支持,且得到得是对象.

标签.currentStyle.属性名 box.currentStyle.width.

③:DOM对象.getComputedStyle()与DOM对象.currentStyle的能力测试:

if (box.currentStyle) {

 //只要进入了if，说明currentStyle的取值为对象，支持

 console.log(box.currentStyle.width);

} else {

 console.log(getComputedStyle(box, null).width);

}

26:

一次设置多个行内的样式属性值(不常用):

box.style.cssText = "width:100px;height:100px;background-color:red;";

27:设置样式的两种方式:

①:DOM对象.style.属性名 = 属性值.

②:DOM对象.className = 名字. 通过类名来修改样式

28:根据类名获取标签对象:

1:document.getElementsByClassName(类名);

但是低版本IE(IE6/7/8)不兼容,我们必须手写兼容程序:

获取标签对象中,仅仅有document.getElementsByTageName(标签名)/document.getElementById(ID名)是兼容IE的,所以在书写原生JS时最好使用tageName与ID的方式来获取标签对象.

书写能力检测:

//步骤1：进行能力检测

// if (document.getElementsByClassName) {

// //支持的代码

// document.getElementsByClassName("box");

// } else {

//如果进入到else，说明当前浏览器不支持此方法，自己书写功能实现。

//需求：根据给定的类名进行元素的获取

//1 获取body中的所有标签

var tags = document.body.getElementsByTagName("*");

var resultArr = [];//结果数组，用于保存获取到的标签

//2 检测当前某个标签的className属性的值

for (var i = 0; i < tags.length; i++) {

//3 取出当前某个标签的类名，用于检测

var oldCls = tags[i].className;

//4 验证时，需要考虑，如果取得的标签不是只有一个类名时，采用相等判断会导致不准确

//将标签的类名按照空格分割

var clsArr = oldCls.split(" ");

//5 遍历，查找指定的部分是否存在

for (var j = 0; j < clsArr.length; j++) {

  //如果某个部分和指定类名相等，取出即可

  if (clsArr[j] == "box") {

    resultArr.push(tags[i]);

    break;//跳出

  }

}

}

console.log(resultArr);

// }

29:页面是如何显示的：

当一个页面被浏览器加载后需要执行以下几个基本步骤：

1 先解析html文件，将标签进行生成，根据每个标签之间的关系，生成一个树模型(节点树)

2 再解析css文件，将样式生成为样式树

3 将样式树和节点树合并，生成一个渲染树(页面等待进行绘制)

4 浏览器会根据渲染树将页面显示出来

4.1 排列：将每个标签确定尺寸和位置

4.2 绘制：将标签内部的内容显示出来(图片，颜色，文字)

现在我们的重点是上面的第一步

第一步会根据html标签生成节点树

作用为，生成每个html标签的对应的DOM对象，方便用户对标签的操作

作用2：一会儿我们要学习的新的访问关系

30: 节点：对节点树中的所有形式内容的统称（都可称为节点）

元素节点 ：标签，页面元素

文本节点 ：文本内容

属性节点 ：标签的行内属性

注释节点 ：注释

根节点 ：document (DOM中的顶级对象，所有DOM的内容均为他下属内容)

31:节点访问总共分为两类:(都是属性)/都是属性/都是属性

①:上下级访问关系(父子关系);父节点/子节点

②:同级访问关系(兄弟关系);

32:上下级访问关系(都是属性):

①:父节点: 节点.parentNode

注意:任意节点，如果具有父节点parentNode的值，结果一定为元素节点(标签).

②:子节点:

节点.childNodes 获取所有子节点,但包括换行/空格等文本节点.

节点.children 获取所有元素子节点（常用）

节点.firstChild 获取第一个子节点,可能是文本节点.

节点.firstElementChild 获取第一个元素子节点.(不兼容低版本的IE,但是 不需要写兼容代码).可以用以下方式来替换: 节点.children[0];

节点.lastChild 获取最后一个子节点,可能是文本节点.

节点.lastElementChild 获取最后一个元素子节点,也不兼容低版本的IE,

不需要书写兼容代码,可以用这个来替换:

节点.children[节点.children.length - 1];

33:同级的访问关系(都是属性):

节点.previousSibling 前一个节点,但是会获取到换行空格等内容.

节点.previousElementSibling 前一个元素节点,低版本的IE不兼容.

节点.nextSibling 下一个节点,会获取到换行空格等内容.

节点.nextElementSibling 下一个元素节点,低版本的IE不兼容.

34:对象的比较,比较的是内存地址值.

每次生成对象,就会在堆内存中产生一个区域存放数据,会有一个内存地址值.

要两个对象相等,必须内部保存的指针相同才可以(实际上是同一个对象才行)

35:获取每个兄弟元素:

找父元素,再找所有的子元素,但是必须排除自己.

36:节点的移动:

1 标签.appendChild(要移动的节点) 追加子节点

效果：将传入的节点添加到调用节点内的所有子节点后面(最后)

A.appendChild(B);   将B 添加到A元素的子元素的最后面.

2 标签.insertBefore(要移动的节点,参考节点) 插入子节点

效果，将要移动的节点插入到指定的参考节点之前。

注意：参考节点必须为调用元素的子节点才可以使用。

A.insertBefore(B, C); 将B移动到元素A里面的元素C前面.

当没有传入第二个参数时,insertBefore()相当于appendChild();

------------------------------------------第四天-------------------------------------------------------

37:为什么要动态加载元素:

1:提高页面的响应速度(动态加载结构).

2:节省流量(动态加载图片).

38:动态加载元素的几种方式:

1:document.write(字符串); 字符串 = “<div>我是div</div>”

2:DOM对象.innerHTML = 字符串;

3:document.createElement(标签名);

39: document.write(字符串):

document.write(字符串)的方式基本不用,因为缺点是在太多:

①:无法指定位置添加:

②:如果将document.write在页面加载后使用，会导致页面所有内容被清除:

40:DOM对象.innerHTML = 字符串:

1):既可以更改内部的文本,也可以加载标签.

2):特点

①:会对标签内部的原有内容进行覆盖:

1.1:解决方法:取出原来的内容与需要生成的内容进行拼接,再一起生成.

box.innerHTML = box.innerHTML + "<div>我是div</div>";

box.innerHTML += "<div>我是div</div>";简化写法

1.2:因为是将旧标签替换为了新标签,所以原来旧标签的事件与自定义属性均不见了.

②:执行效率比较差:

查看用了多长事件的方法:

console.time("innerHTML的执行速度");

for (var i = 0; i < 2000; i++) {

 box2.innerHTML += "<div></div>";

}

console.timeEnd("innerHTML的执行速度");

41:document.createElement(标签名)

在创建元素后不会立刻在页面中显示

如果想要在页面中显示，需要添加到页面中的某个位置(appendChild/insertBefore)

而且效率比较的高,与innerhtml的效率比例为1:1000:

总结:我们在使用document.createElement时，没有特定的使用场景，只要innerHTML不适用，均可使用document.createElement.

42:解决innerhtml创建元素效率低下的问题:

解决方法:可以使用字符串或者数组的替换方式，在循环中替代innerHTML，将最终结果一次设置给innerHTML属性.

代码优化后，执行时间为 2.7ms，大幅度的提高执行速度

console.time("innerHTML的执行速度");

for (var i = 0; i < 2000; i++) {

  str += "<div></div>";

}

box.innerHTML = str;

console.timeEnd("innerHTML的执行速度");

43:几种创建元素的方式的总结:

直接用document.createElement(标签名)就好了,大量的创建我们后面会用模板的形式.

①:innerHTML的使用场景：

如果需要创建的结构大量重复并且结构比較复杂时，推荐使用innerHTML的方式（操作方式为字符串拼接，可以直接拷贝html中设计好的结构，直接使用）.

②:document.createElement必须使用的场景：

要进行动态创建元素的位置上具有旧的标签，并且旧的标签可能具有事件时，必须使用此方式。

44:移除子节点:

父节点.removeChild(要删除的子节点);

45:onkeydown/onkeyup 事件

onkeydown 当键盘上的某个按键按下后，触发事件

onkeyup 当键盘上的某个按键按下后，按键抬起触发

获取输入框的内容时：

1 keydown无法获取到本次刚输入的内容部分

2 keyup可以获取到当前输入的结果(常用)

46: str.indexOf(“abc”) abc是否是str的一部分 返回true/false

使用indexOf的时候想要匹配成功，参数字符串必须比调用的字符串短

注意的点：使用空字符串对其他字符串进行匹配时，可以在开头立刻匹配成功

-------------------------------------------第五天----------------------------------------------

47: 克隆 标签.cloneNode(bool值)

需要克隆的标签不要设置id名.

默认值为false，false表示浅复制，只复制标签本身，不复制内部内容

true表示深复制，复制标签以及内部内容

无论哪种克隆方式(深复制或者浅复制)均无法复制标签的内容或内部的属性.

复制完的标签必须使用appendchild,或者insertbefore添加到具体的标签内,不然看不到.

48: 替换节点: replaceChild();

父节点.replaceChild(新节点,替换哪个子节点);

返回值，替换掉的节点会被返回，可以根据需求继续使用;

49:节点是对节点树中所有内容的统称(对页面中所有内容的统称)

1 元素节点

2 属性节点

3 文本节点

7 注释节点

9 document 根节点

每个节点都具有三个属性：

①:nodeType 用于标注某个节点的类型:

返回值为数值类型，1表示元素节点

②:nodeValue 用于表示节点的节点值

 元素节点没有节点值属性，返回值为null

③:nodeName 用于显示节点名

nodeName属性对于元素节点来说，结果为标签名(在html中为大写形式,在xhtml中为小写形式)

50:总结:

[图片上传失败...(image-d355f4-1515936359360)]

-------------------------特效第一天-----------------------

51:offsetwidth/offsetheight

1: 标签对象.offsetwidth/offsetheight

2:是一个只读属性，没有px单位.可直接运算.

3:获取的盒子的真实大小: width/height+padding+border.

4:

[图片上传失败...(image-8cf329-1515936359359)]

52: 标签对象.style.width/height.

1:仅仅能获取/设置行内样式.

2:获取/设置的均是字符串,带px单位.

3:获取/设置的仅仅是 width.

4:

[图片上传失败...(image-d3da7d-1515936359359)]

53:总结:

获取宽度/高度的时候，用offsetWidth/offsetHeight

设置宽度/高度的时候，用style.width/style.height,记得带px单位.且为行内式

54:parentNode与offsetParent

1:标签对象.parentNode

标签对象.offsetParent

2: parentNode 找父类元素.

offsetParent 找最近的有定位的父元素.如果都没有,一直找到body.

55:标签对象.style.left/top.

1:给定位的盒子设置偏移的量.

2:仅仅能获取/设置行内样式.

3:获取/设置的均是字符串,带px单位.

4:

[图片上传失败...(image-151f37-1515936359359)]

56:标签对象.offsetLeft/offsetTop

1: offsetLeft: 自身左侧到offsetParent左侧的距离：left + margin-left

offsetTop:自身顶部到offsetParent顶部的距离 : top + margin-top

2:仅仅能获取,不能设置.且为数值类型.

3:

[图片上传失败...(image-9ffdb-1515936359358)]

57:总结.

获取操作：用offset系列

设置操作：用style.xxx进行设置。

[图片上传失败...(image-92ee70-1515936359358)]

58:getComputedStyle 获取计算后的样式

1:标签对象.getComputedStyle(ele,null)

2:传入两个参数,

第一个参数: 元素,需要获取的标签对象

第二个参数: 伪元素,null.

3:返回的是一个对象,后面需要.具体的属性.

[图片上传失败...(image-630c26-1515936359358)]

4:存在兼容问题:

element:获取谁的样式

attr: 获取的样式的属性名

function getStyle(element, attr) {

 //能力检测

 if(window.getComputedStyle) {

   return window.getComputedStyle(element, null)[attr];

 }else {

   return element.currentStyle[attr];

 }

}

59:节流阀步骤：

1. 定义节流阀开关

2. 判断阀门是否打开，只有打开了才能执行

3. 关闭阀门，不让其他人执行

4. 执行完动画之后，打开阀门

60:三大家族.

Offset家族

Scroll家族

Client家族.

61:Offset家族.

标签对象.offsetHeight/offsetWidth/offsetParent/offsetLeft/offsetTop

1:offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

2:特点:

获取的是元素真实的高度和宽度

获取到的是数值类型，方便计算

3:offsetHeight与offsetWidth是只读属性，不能设置。

offsetHeight = height + paddnig + border

offsetWidth = width + padding + border

4:与style.height/style.width区别.

只能获取行内样式

获取到的是字符串类型带px单位，需要转换

[图片上传失败...(image-71178d-1515936359357)]

62:scroll家族

(1): scroll家族用来获取盒子内容的大小和位置

scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop

(2):scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。

(3):scrollTop是盒子内容被滚动条卷去的头部的高度。scrollLeft是盒子内容被滚动条卷去的左侧的宽度。

[图片上传失败...(image-9b1a30-1515936359357)]

(4):onscroll事件，对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。

var box = doucment.getElementById(“box”);

box.onscroll = function(){

//事件处理程序

}

:一般用来获取scrollLeft与scrollTop.但是有兼容性的问题,将其封装如下:

function scroll() {

return {

    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,

    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0

};

}

//如何使用

console.log(scroll().top);//获取页面被卷去的头部的距离

console.log(scroll().left);//获取页面被卷去的左侧的距离

63:client家族.

(1):client家族用于获取盒子可视区的大小

client家族有clientWidth、clientHeight、clientLeft、clientTop

(2):如果内容没有超出盒子,clientWidth与scrollWidth相同.

[图片上传失败...(image-ad542d-1515936359357)]

(3):三大家族的对比

[图片上传失败...(image-6a7b14-1515936359357)]

64:onresize事件.

1:onresize事件会在窗口被调整大小的时候发生。

window.onresize = function(){

//事件处理程序

}

2:client系列一般用来获取页面的可视区宽高

但是存在兼容性问题,书写兼容如下:

function client() {

return {

    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,

    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0

};

}

65:事件对象.

1:什么是事件对象:

在触发某个事件的时候，都会产生一个事件对象Event，这个对象中包含所有与事件相关的一些信息，包括触发事件的元素，事件的类型以及其他与事件相关的信息。

2:获取事件对象存在兼容性的问题.

btn.onclick = function(event){

  //只要用到了事件对象，就要记得处理浏览器兼容性

event = event || window.event;

}

66:事件对象中属性.

1:在事件对象中我们经常用到的是鼠标位置信息与键盘码信息.

2:记录了鼠标位置信息的相关属性.

screenX与screenY：光标相对于屏幕左上角的水平位置与垂直位置。

clientX与clientY：光标相对于可视区左上角的水平位置和垂直位置。

pageX与pageY：光标相对于网页（文档document）左上角的水平位置与垂直位置（推荐使用）

[图片上传失败...(image-378c05-1515936359356)]

3:记录了键盘码的属性.

event.keyCode:键盘按下的那个键的键盘码

4:pageX与pageY存在兼容性的问题.

function getPage(event) {

return {

      //在IE678中使用document.documentElement.scrollLeft就可以获取到scrollTop的值

    x:event.pageX || event.clientX + document.documentElement.scrollLeft,

    y:event.pageY || event.clientY + document.documentElement.scrollTop

}

}

67:on注册事件.

1:注册事件:

box.onclick = function(){//代码块}.

2:移除事件.

box.onclick = null.

3:同一个元素的同一个类型的事件,仅仅能注册一个,注册多个会产生覆盖.

68:addEventListener 绑定事件

1:语法.

第一个参数：事件的类型：click mouseover

第二个参数：函数，监听者，每次点击，这个函数就执行。

第三个参数：false

addEventListener(type, func, useCapture);

2:如果想让你注册的事件能够被移除就不能使用匿名函数.

function fn1() {

  alert("hehe");

}

//如果想让注册的事件能移除，不能用匿名函数。

box.addEventListener("click", fn1, false);

69:removeEventListener. 移除事件.

1:要想被移除,就不能是匿名函数

2:语法:

第一个参数：参数类型

第二个参数：要移除的那个函数

第三个参数：false

removeEventListener(type, func, useCapture);

70:在IE6/7/8里面不支持addEventListener /removeEventListener.

仅仅有attachEvent与detachEvent

1:attachEvent的用法.

//type:事件类型 需要加上on onclick onmouseenter

//func:需要执行的那个事件

attachEvent(type, func)

2:detachEvent的用法.

//type:事件类型 需要加上on onclick onmouseenter

//func:需要执行的那个事件

detachEvent(type, func)

71:注册/移除事件的封装.

//添加事件

function addEvent(element, type, fn){

//能力检测

if(element.addEventListener){

    element.addEventListener(type, fn, false);

}else if(element.attachEvent){

    element.attachEvent("on"+type, fn);

}else {

    //如果都不行，那就用on方式

    element["on"+type] = fn;

}

}

//移除事件

function removeEvent(element, type, fn) {

if(element.removeEventListener){

    element.removeEventListener(type, fn, false);

}else if(element.detachEvent){

    element.detachEvent("on"+type, fn);

}else {

    element["on"+type] = null;

}

}

72:常见的鼠标事件.

onmousedown:鼠标按下事件

onmouseup:鼠标弹起事件

onclick:单击事件

ondblclick：双击事件

onmouseover：鼠标经过事件

onmouseout：鼠标离开事件

onmousemove：鼠标移动事件

onfocus：鼠标获得焦点事件

onblur：鼠标失去焦点事件

73:常见的键盘事件.

onkeydown:键盘按下时触发

onkeyup:键盘弹起时触发

对于鼠标事件，事件对象中有一系列的XY记录了鼠标的位置信息。而键盘事件中，事件对象有一个event.keyCode属性，记录了按下去的键的键盘码.

74:正则表达式在笔记本与特效第五天的笔记上.