JS基础 DOM编程学习总结

1.JavaScript DOM 概述

每个在浏览器打开的HTML文档都会成为doucment对象。doucment对象可以对页面中所有的元素进行访问，doucment对象是window对象的一部分。

2.JavaScript节点与节点树

在加载html页面时，浏览器会生成一个与之对应的树形结构用来表示页面内部结构。

html标签为根标签，head为html的子标签，meta和title是兄弟关系。

3.JavaScript获取HTML标签元素

getElementById()​ 根据id获取元素，id唯一，不能同时给两个或两个以上的元素节点创建同一个命名id，如果不存在返回null；返回值Element。
getElementsByName() 根据name获取元素，name不唯一，相同的name可以多次出现。返回值NodeList/HTMLCollection。
getElementsByTagName() 根据标签名获取元素，返回值为元素的节点对象，NodeList/HTMLCollection。
getElementsByClassName() 根据类名获取元素， 返回值NodeList/HTMLCollection。
querySelector() 根据选择器获取元素，该方法只返回匹配到的第一个元素
querySelectorAll() 根据选择器获取元素，该方法返回所有的元素，
querySelector() 和querySelectorAll() 参数和css中参数类似，需要加上“#”和“.”。css中的选择器在这也可以使用。
总结：
1.可以将上述方法封装为函数，调用更方便，但编译器可能没提示。
2.getElementById()​ 和querySelector() 返回的都是元素节点，剩下的四种方法返回的NodeList/HTMLCollection，也就是集合，所以如果需要操作标签内容需要先遍历再调用方法。

4.JavaScript操作标签内容

element.innerHTML​ 设置或返回元素的内容。
element.innerText​ 设置或返回元素的文本内容
element.tagName​ 返回元素的标签名。返回的标签名为大写，课通过toLocaleLowerCase方法转换为小写输出。
innerText和innerHTML的区别：

• innerText只能获取到文本内容,标签不会被获取; innerHTML获取到所有的内容,包含标签;
• innerText设置的内容会被浏览器认为是纯文本;innerHTML设置的内容会被浏览器认为是HTML文本,如果存在标签会被解析;

5.JavaScript操作标签属性

1.HTML基本属性操作
element.属性名​ ，设置或返回元素的指定属性。
注：
1.class属性操作必须使用className。
2.element只能调用html具有的属性。
2.HTML方法操作属性
element.getAttribute()​ ，返回元素节点的指定属性值。
element.setAttribute()​ ，把指定属性设置或更改为指定值。参数有两个，属性名和值。
element.removeAttribute() ，从元素中移除指定属性。
总结：
HTML方法操作属性可以操作html不存在的属性，还可以添加和移除属性，使用起来更加灵活。

6.JavaScript Document对象属性一览

1、document.title ，设置或获取文档标题，等价于HTML的

2、document.cookie，设置和读出cookie。设置时每条语句只能设置一个属性，同一个键再次设置将覆盖原来的值.
3.document.images ，获取页面标签
4.body ，获取到body元素节点
5.head ，获取head元素节点
以上为必将常用的对象。

7.JavaScript获取层次节点

常见的节点类型有元素节点、属性节点、注释节点和文本节点。
节点层次划分为：父节点和子节点、兄弟节点。
节点和节点直接只要有空隙(空格/换行),都存在一个空节点(空节点属于文本节点);文本节点和任意节点之间都没有空节点
节点三个属性nodeName、nodeType、nodeValue。

firstChild， 获取当前元素节点的第一个子节点
firstElementChild​， 获取当前元素节点的第一个元素子节点
lastElementChild​，获取当前元素节点的最后一个元素子节点
parentNode​ ，获取当前节点的父节点
nextElementSibling​ ，获取当前节点的后一个同级元素节点
childElementCount ​，获取当前节点的元素节点的个数
children​ 获取当前节点的所有元素子节点

8.JavaScript操作节点

createElement()， 创建一个元素节点
appendChild()​，将新节点追加到子节点列表的末尾
createTextNode()​ ， 创建一个文件节点
insertBefore(新节点,已有节点) ，可在已有的子节点前插入一个新的子节点.
​repalceChild() ，可将某个子节点替换为另一个。
cloneNode()， 复制节点
removeChild() ，删除父节点下指定的子节点

9.JavaScript操作表格

1、table独有的属性和方法。

2、tbody / thead / tfoot / table元素的属性和方法
rows 保存tbody元素行的HTMLCollection
deleteRow(index) ，删除指定位置的行
insertRow(index) ，向rows集合指定位置插入一行，并返回引用
3、tr 元素属性和方法
cells ，保存 tr 元素中单元格HTMLCollection
deleteCell(index) ，删除指定位置的单元格
insertCell(index) ，向cells集合指定位置插入一个单元格，并返回引用

10.JavaScript事件

1.事件三种使用方式

1. 内联方式：将js代码写在html内部，可以给一个元素定义的同一个事件添加多个执行函数
   优点: 一种事件可以对应多个事件处理函数
   缺点:
   1、结构和行为未分离
   2、代码复用性低
   3、在内联事件函数里面不能使用this
2. 脚本方式：再js代码部分先获取元素，然后给其添加事件，再给事件赋值
   优点:
   1、结构和行为分离
   2、提高了代码复用性
   缺点:
   一种事件只能对应一个事件处理函数
3. 事件监听(侦听)方式：添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。
   优点:
   1、结构和行为分离
   2、提高了代码复用性
   3、一种事件可以绑定多个事件处理函数
   4、采用事件监听给对象绑定方法后，可以解除相应的绑定

2.常用的事件类型

1. 鼠标事件：

1、click：当用户单击鼠标按钮[鼠标左键]
​        input.onclick = function () {alert('1');};
2、dblclick：当用户双击主鼠标按钮时触发。[鼠标左键]
​        input.ondblclick = function () {lert('1');};
3、mousedown：当用户按下了鼠标还未弹起时触发[鼠标左右键]。
​        input.onmousedown = function () {alert('1');};
4、mouseup：当用户释放鼠标按钮时触发[鼠标左右键]。
​        input.onmouseup = function () {alert('1');};
5、mouseover：当鼠标移到某个元素上方时触发。
​        input.onmouseover = function () {alert('1');};
6、mouseout：当鼠标移出某个元素上方时触发。
​        input.onmouseout = function () {alert('1');};
7、onmouseenter：当鼠标移到某个元素上方时触发。
​        input.onmouseenter= function () {alert('1');};
8、onmouseleave：当鼠标移出某个元素上方时触发。
​        input.onmouseleave = function () {alert('1');};
9、mousemove：当鼠标指针在元素上移动时触发。
        input.onmousemove = function () {alert('1');};

2. 键盘事件

1、keydown：用户按下键盘上的任意键触发，按住不放会重复触发
2、keypress：当用户按下键盘上的字符键触发，按住不放会重复触发
3、keyup：当用户释放键盘上的键触发。
keypress 和 keydown 区别：keydown 先于 keypress 发生、keypress 无法系统按钮、keydown 捕获的 keyCode 不区分字母大小，而 keypress 区分、keyup 是在用户放开任何先前按下的键盘键时发生、

3. 框架事件
   1、load ，当页面完全加载后在window 上面触发，或当框架集加载完毕后在框架集上触发。
   2、unload，用户退出页面触发。
   3、beforeunload，该事件在即将离开页面时触发。
   4、hashchange ，锚点发生修改时触发
   5、resize，窗口大小发生变化时触发
   6、scroll，用户滚动窗口触发

4. 表单事件
   1、select，当用户选择文本框文字松开鼠标按键触发
   2、change，表单内容发生改变时触发
   3、focus，元素获取焦点时触发。
   4、blur，元素失去焦点时触发。
   5、submit，当用户点击提交按钮在form元素上触发，该事件是from的事件，不是submit的。
   6、reset，当用户点击重置按钮在form元素上触发，该事件是from的事件，不是reset的。
   7、input，用户在输入时触发

3.事件的冒泡和捕获

事件冒泡：在一个对象上触发某类事件，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层document对象。
事件的捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。事件捕获时，父级元素先触发，子级元素后触发。
1.事件的三个阶段
捕获阶段，目标阶段，冒泡阶段
2.事件对象的属性和方法
1、event.eventPhase，返回事件传播的阶段，返回值为1，2，3
2、event.target || event.srcElement ，返回触发此事件的元素
3、event.currentTarget ，返回事件***触发该事件的元素
4、event.bubbles，返回事件是否冒泡
5、event.type，返回事件类型
6、event.timeStamp ，返回事件生成的日期和时间的时间戳
7、event.clientX/clientY ，返回鼠标单击当前窗口的位置，左上角为0，0
8、event.pageX/pageY，返回鼠标单击在当前页面的位置，ie8以前不支持，需要做兼容性处理
3.事件委托
事件委托：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型所有事件。
为什么要用事件委托：在JavaScript中，添加到页面上的事件处理程序数量直接关系到页面整体运行性能。访问dom次数越多，浏览器需要重绘与重排的次数也就越多，页面交互的就绪时间就会被延长。事件委托就会将所有的操作放到js函数里，与dom交互一次即可，可以大大减少与dom交互的次数，提高性能。
事件委托可以先用Event对象的target属性返回事件的目标节点，然后用nodeName获取标签名，需要注意Event兼容性问题。
4.阻止事件
event.stopPropagation()方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数。
event.preventDefault()取消浏览器对当前事件默认行为，用于阻止超链接跳转
return false；阻止超链接跳转

11.JavaScript操作CSS样式

1.使用style访问样式（重点）

1、style返回值：CSSStyleDeclaration对象
2、语法格式：元素.style.属性 = “值”。
3、样式属性font-size在js中代码为fontSize，其他的类似。
4、宽高一类的长度属性设置要加上px。
5、cssText，访问或设置css代码，该属性好处是减少dom操作，在设置多条样式时更方便。所有样式设置在一条语句中。
6、removeProperty（name），删除指定的样式。

2.操作内部或外部CSS样式

获取到元素的样式：getComputedStyle().

12.offset、client、scroll三大家

1.偏移量

offsetParent ，用于获取定位的父级元素
offsetLeft ，X轴偏移，相对于父元素offsetParent的偏移量
offsetTop ，Y轴偏移，相对于父元素offsetParent的偏移量
offsetWidth，元素的宽度，包含padding和border
offsetHeight，元素的高度，包含padding和border

offsetWidth/offsetHeight = width/height + padding + border

offsetLeft 和offsetTop是相对于offsetParent的偏移量，如果父元素没有定位属性,那么继续向上级查找,直到找到body;如果是根据body来获取的偏移量,那么其实就是在页面中的位置。如果父元素有定位属性,那么就说相对于父元素的定位

offsetParent和parentNode的区别?
parentNode就是父节点
offsetParent是具有定位的父级节点

2.客户区大小

clientLeft ，border-left的宽度
clientTop ，border-top的宽度
clientWidth ，客户区宽度，包含padding，不包含border
clientHeight ，客户区高度，包含padding，不包含border

clientWidth/clientHeight = width/height + padding

3.滚动偏移

scrollLeft ，左侧滚动进去的距离
scrollTop ，顶部滚动进去的距离
scrollWidth，是获取元素的宽 + 内边距 + 未显示的内容,不包含滚动条
scrollHeight，是获取元素的高 + 内边距 + 未显示的内容,不包含滚动条
scrollWidth/scrollHeight = width/height + padding + 未显示内容 - 滚动条宽度