初识js（二）

1.dom对象的innerText和innerHTML有什么区别？

• innerText：从起始位置到终止位置的内容, 去除Html标签 （就是元素中的文本内容）
• innerHTML：从对象的起始位置到终止位置的全部内容,包括Html标签

2.elem.children和elem.childNodes的区别？

• children
  1.此属性不是符合W3C标准规范的属性，可以获取指定元素的子元素
  2.同样是一级子元素，它获取的子元素都是元素节点，也就是没有属性节点和文本节点等其他节点。
  3.尽管它不是符合W3C标准的规范，但是当下的浏览器兼容性很好。
• childNodes：
  1.是符合W3C标准的属性，它可以返回指定元素的子元素集合，包括属性节点，元素节点和文本节点。
  2.它同样是返回的一级子元素。
  3.此属性虽然是符合W3C标准的，但是往往不会给我带来想要的结果，比如我们想要获得指定元素的一个子元素节点，但是如果存在换行或者空格的话，也会返回文本节点，而不仅仅是元素节点

3.查询元素有几种常见的方法？

• getElementById():返回匹配指定ID属性的元素节点，如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
• getElementByClassName():返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回的结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var elements = document.getElementsByClassName(names);

var elements = document.getElementsByClassName(names);

document.getElementsByClassName('red test');

• getElementsByTagName():getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var paras = document.getElementsByTagName("p");

• getElementsByName():适用于拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反应元素的变化

// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值

• query Selector():返回匹配指定的css选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector(".myclass");

• querySelectorAll():返回匹配指定的csss选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");//返回class属性是note或alert的div元素

• elementFromPoint():返回位于页面指定位置的元素

var element = document.elementFromPoint(x, y);

4.如何创建一个元素？如何给元素设置属性？

• createElement():用来生成HTML元素节点

var newDiv = document.createElement("div");

createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

• createTextNode():createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newContent = document.createTextNode("Hello");

• createDocumentFragment():生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

5.元素的添加、删除？

添加

• appendChild()：在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

• inserBefore():在某个元素之前插入元素

node.insertBefore(*newnode*,*existingnode*)

• replaceChild():接受两个参数，即要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

删除

• removeChild()

parentNode.removeChild(childNode);

6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

• DOM0级:通过把函数实例的引用指派到DOM元素的属性而声明的
  一是在标签内写onclick事件

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

二是在JS写onlicke=function（）{}函数

document.getElementById("myButton").onclick = function () { alert('thanks');}

缺点是，属性被用于存储作为事件处理程序的函数的引用，所以每个元素对于任何特定的事件类型，每次只能注册一个事件处理程序。

• DOM2级：监听方法，可以为事件添加多个处理程序，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()
  格式如下：

addEventListener(enentType,listener,useCapture) 
//第一个参数是事件名（如click）
//第二个参数是事件处理程序函数
// 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用

通过addEventListener添加的事件处理程序只能通removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除

7.attachEvent与addEventListener的区别？

• addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数
• addEventListener共有3个参数，如下所示：
  element.addEventListener(type,listener,useCapture)

参数	参数说明
element	事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”
listener	要绑定的事件监听函数，注意只写函数名，不要带括号
userCapture	事件监听方式，只能是true和false：true，采用capture(捕获)模式；false，采用bubbling(冒泡)模式。如无特殊要求，一般是false

• attachEvent共有2个参数，如下所示：
  element.attachEvent(type,listener)

参数	参数说明
element	要绑定事件的对象，及HTML节点
type	事件名称，注意加上事件前边的“on”，比如“onclick”和“onmouseover”，这是与addEventListener的区别
listener	要绑定的事件监听函数，注意只写函数名，不要带括号

• addEventListener的作用域是元素本身，this指触发元素，而attachEvent事件处理程序会在全局变量内运行，this指的是window

8.解释IE事件冒泡和DOM2事件传播机制？

• IE事件冒泡：:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签
• DOM2标准事件模型：这个事件模型规定，每一个DOM元素所触发的事件都要经历三个阶段：一、捕获阶段；二、目标对象本身的事件处理程序调用阶段；三、冒泡阶段。

9.如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止事件冒泡
  1.IE

event.cancelBubble = true

2.DOM2

event.stopPropagation()

• 阻止默认事件
  1.IE

event.returnValue = false

2.DOM2

event.preventDefault()