初识js（二）
2016-09-06 本文已影响0人
小周师傅
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()
