dom属性和JS中的dom操作

DOM 操作

1.创建新节点

• createDocumentFragment() //创建一个 DOM 片段
• createElement() //创建一个具体的元素
• createTextNode() //创建一个文本节点

2.添加、移除、替换、插入

• appendChild() //把节点插入到父节点的末尾
• removeChild() //删除dom节点
• replaceChild() //替换dom节点
• insertBefore() //在已有的子节点前插入一个新的子节点

3.比较

isSameNode()比较两个节点是否是同一个节点

4.查找

• getElementsByTagName() //通过标签名称
• getElementsByName() // 通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)
• getElementById() //通过元素 Id，唯一性
• querySelector()方法
  querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹
  配的元素，返回 null.
  通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。而
  通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。

//取得 ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected"); 

• querySelectorAll()方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但
  返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。(底层实现则类似于一组元素的快照,性能问题)

//取得某<div>中的所有<em>元素（类似于 getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected"); 

• Selectors API Level 2 规范为 Element 类型新增了一个方法 matchesSelector()。这个方法接收
  一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。

querySelector和getElementBy的区别

• getElementBy是document对象特有的函数，只能通过其来调用该方法。
• query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
• 在使用的时候getElement这种方法性能比较好，因为动态 NodeList 对象在浏览器中可以更快地被创建并返回,因为他们不需要预先获取所有的信息, 而静态 NodeList 从一开始就需要取得并封装所有相关数据.
  因为是静态，所querySelector可以实现单击一个按钮但调用另一个按钮的点击事件。

DOM遍历

1.NodeIterator

NodeIterator 类型是两者中比较简单的一个，可以使用 document.createNodeIterator()方
法创建它的新实例。这个方法接受下列 4 个参数。

• root：想要作为搜索起点的树中的节点。
• whatToShow：表示要访问哪些节点的数字代码。
• filter：是一个 NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。
• entityReferenceExpansion：布尔值，表示是否要扩展实体引用。这个参数在 HTML 页面
  中没有用，因为其中的实体引用不能扩展。

2 TreeWalker

TreeWalker 是 NodeIterator 的一个更高级的版本,提供了下列用于在不同方向上遍历 DOM 结构的方法。

• nextNode():下一个节点
• previousNode()：上一个节点
• parentNode()：遍历到当前节点的父节点；
• firstChild()：遍历到当前节点的第一个子节点；
• lastChild()：遍历到当前节点的最后一个子节点；
• nextSibling()：遍历到当前节点的下一个同辈节点；
• previousSibling()：遍历到当前节点的上一个同辈节点

创建它的新实例。这个方法接受和 NodeIterator相同的 4 个参数。

DOM相关问题

1.documen.write 和 innerHTML 的区别

• document.write 只能重绘整个页面
• innerHTML 可以重绘页面的一部分

2.Window 对象 与 document 对象

window

• Window 对象表示当前浏览器的窗口，是 JavaScript 的顶级对象。
• 我们创建的所有对象、函数、变量都是 Window 对象的成员。
• Window 对象的方法和属性是在全局范围内有效的。

document

• Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
• Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
• Document 对象是 Window 对象的一部分，即 window.document

3.区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”

• 客户区坐标
  • 鼠标指针在可视区中的水平坐标(clientX)和垂直坐标(clientY)
• 页面坐标
  • 鼠标指针在页面布局中的水平坐标(pageX)和垂直坐标
• 屏幕坐标
  • 设备物理屏幕的水平坐标(screenX)和垂直坐标(screenY)

4.focus/blur 与 focusin/focusout 的区别与联系

1. focus/blur 不冒泡，focusin/focusout 冒泡
2. focus/blur 兼容性好，focusin/focusout 在除 FireFox 外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在 FireFox 下使用事件捕获 elem.addEventListener(‘focus’, handler, true)

5.mouseover/mouseout 与 mouseenter/mouseleave 的区别与联系

1. mouseover/mouseout 是标准事件，所有浏览器都支持；mouseenter/mouseleave 是 IE5.5 引入的特有事件后来被 DOM3 标准采纳，现代标准浏览器也支持
2. mouseover/mouseout 是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐 mouseover/mouseout 托管，提高性能
3. 标准事件模型中 event.target 表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老 IE 中 event.srcElement 表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

6.IE 的事件处理和 W3C 的事件处理有哪些区别？

绑定事件

• W3C: targetEl.addEventListener(‘click’, handler, false);
• IE: targetEl.attachEvent(‘onclick’, handler);

删除事件

• W3C: targetEl.removeEventListener(‘click’, handler, false);
• IE: targetEl.detachEvent(event, handler);

事件对象

• W3C: var e = arguments.callee.caller.arguments[0]
• IE: window.event

事件目标

• W3C: e.target
• IE: window.event.srcElement

阻止事件默认行为

• W3C: e.preventDefault()
• IE: window.event.returnValue = false’

阻止事件传播

• W3C: e.stopPropagation()
• IE: window.event.cancelBubble = true

7.DOM 元素的 dom.getAttribute(propName)和 dom.propName 有什么区别和联系

• dom.getAttribute()，是标准 DOM 操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
• dom.propName 通常是在 HTML 文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如 a 标签生成 HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用 getAttribute 进行访问
• dom.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）
• dom.propName 返回值可能是字符串、布尔值、对象、undefined 等
• 大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性
• 一些布尔属性<input hidden/>的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property
• 像<a href="../index.html">link</a>中 href 属性，转换成 property 的时候需要通过转换得到完整 URL
• 一些 attribute 和 property 不是一一对应如：form 控件中<input value="hello"/>对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property

DOM样式

1.JS 获取 dom 的 CSS 样式

dom.style.name通过dom元素的style属性，只能访问到dom的行内样式
通过getComputedStyle可以获取到元素的style,但是这个属性是只读的，要修改样式还是用DOM.style.样式名

function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return window.getComputedStyle(obj, false)[attr];
  }
}

IE不支持该属性，通过currentStyle属性代替

2.link引入和@import引入css文件的区别

当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

3.css的权重

行内样式>内部样式表>外部样式表

4.样式选择器的优先级

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器 (即* {…})

5.offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

offsetWidth/offsetHeight 返回值包含 content + padding + border，效果与 e.getBoundingClientRect()相同
clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸