Javascript高级程序设计第十、十一章_javascript第十一章项目-优快云博客

本文链接：https://blog.youkuaiyun.com/u010313768/article/details/48034881

第10章

1.注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生Javascript对象的形式或活动特点并不一致。

2.判断节点是元素的方法,跨浏览器兼容

if(someNode.nodeType == 1){
  alert("Node is an element..");
}

3。对arguments对象可以使用Array.prototype.slice()方法可以将其转换为数组，对类数组都可以

但对COM对象不可以（IE8-），手动转换为数组代码,应用了监测怪癖的形式

function convertToArray(nodes){
  var array = null;
  try {
    array = Array.prototype.slice.call(nodes, 0);
  }catch(ex){
    array = new Array();
    for(var i=0,len=nodes.length;i<len;i++){
      array.push(nodes[i]);
    }  
  }

return array;
}

①每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一个类数组，它实际上是基于DOM结构动态执行查询的结果。

4.Document类型

①document.documentElement:始终指向HTML页面中的<html>元素

②document.doctype:由于浏览器对此支持不一致，这属性用处有限

③document.title:获取或设置文档的标题

④document.URL(可读)、document.domain(可读可写)、document.referrer(来源页面，可读)。

document.domain的用处：当页面中包含来自其他子域的的框架或内嵌框架时，设置document.domain就很方便了

由于跨域安全限制，来自不同子域的页面无法通过Javascript通信。

⑤查找元素：getElementById("id")和getElementsByTagName("tagName")，大小写区分(IE8-不区分)，不存在则返回null

getElementsByTagName("tagName")返回HTMLCollection对象，一个“动态”集合

getElementByName("name"),比较难见到，返回一个HTMLCollection对象。

⑥特殊集合：document.forms：和getElementsByTagName("form")一样，

document.images：和getElementsByTagName("img")一样

⑦DOM一致性检测，接受两个参数，要检测的DOM功能的名称、版本号

var hasXmlDom = document.implementation.hasFeature("XML","1.0");具体看书上P259

⑧文档写入：write()和writeIn(),在页面加载的过程中，可以使用这两个方法向页面中动态加入内容

⑨document.head：支持的浏览器不多，要跨兼容性的话：

var head = document.head || document.getElementById("head")[0]

⑩document.charset:返回文档当前的字符,在chrome浏览上设置没反应了

document.defaultCharset:表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么

5.Element类型

①通过getAttribute()方法可以取得自定义特性，特性不区分大小写。

②有两类特殊的特性。一个是style特性，返回的是一个对象，而getAttribute()返回文本。

一个是onclick特性，返回的是一个javascript函数，而getAttribute()返回文本。

由于这些特性，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性的情况下，才会使用getAttribute()方法。

6.理解DOM的关键，就是理解DOM对性能的影响。DOM操作往往是Javascript程序中开销最大的部分，而因访问Nodelist导致的问题也最多。Nodelist对象都是“动态的”，这就意味着每次访问NodeList对象，都会执行一次查询。

一个是onclick特性，返回的是一个javascript函数，而getAttribute()返回文本。

由于这些特性，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性的情况下，才会使用getAttribute()方法。

第11章：

1.选择符API

①querySelector()方法接受一个 css选择符，返回与该模式匹配的第一个元素，如果没有匹配的元素则返回null，可以在通过

Document类型和Element类型调用

querySelectorAll()返回一个Nodelist的实例，但和Nodelist类型不同，其底层实现则类型于一组元素的快照

2.元素遍历

firstElementChild、lastElementChild、previousElementSibling、nextElementSibling是firstChild等的元素版，

可惜啊可惜啊，IE9+啊，IE8的市场占有率还这么大可不能用啊

3.插入标记

①innerHTML属性，写入script和style会有限制，并且在IE~IE8中，不是所有元素都支持innerHTML属性，

table、tbody、thead、tfoot、tr等都不支持

使用该属性的大大好处：插入大量HTML标记时，效率高。并且在设置innerHTML时会创建一个HTML解析器，这个解析器事在浏览器级别的代码（通常是C++编写的）基础上运行的，因此比执行Javascript快得多。但不可避免地，创建和销毁HTML解析器也会带来性能损失

4.scrollIntoview()方法，跨浏览器兼容

该方法可以再所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素可以出现在视口。不传参数或穿参数true，元素的顶部与视口顶部平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中

5.文档模式

IE8引入了一个新的概念“文档模式”，别和“兼容模式”（BackCompat、CSS1Compat）混淆了,页面的文档模式决定了可以使用什么功能。换句话说，文档模式决定了你可以使用哪个级别的CSS，可以在Javascript中使用哪些API，以及如何对待文档类型（doctype），有IE5（只有此时混杂模式）、IE7、IE8、IE9（最高级的模式）。

①默认情况下，浏览器会通过文档类型声明来确定是使用使用最佳的可用文档模式，还是混杂模式

②要强制浏览器以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible，或通过等价的<meta>标签来设置：

6.children属性：HTMLCollection的实例，只包含元素中同样还是元素的子节点。除此之外，children属性与childNodes没什么区别。IE8以及更早版本的children属性中也会包含注释节点，但IE9之后的版本则只返回元素节点，支持此属性的浏览器IE5，感觉会很有用啊，哈哈哈。

7.innerText属性：返回操作元素中包含的所有文本内容，包括子文档树中的文本，写入值中，结果会删除元素的所有子节点，插入包含相应文本值的文本节点

支持此属性的浏览器包括IE4+、Safari 3+、Opera 8+和Chrome。

firefox不支持此属性，不过支持textContent，支持此属性的浏览器IE9+

支持此跨浏览器兼容性写法如下：

function getInnerText(element){
  return (typeof  element.textContent == "string")?element.textContent ： element.innerText;
}

function setInnerText(element){
  if(typeof element.textContent == "string"){
    element.textContent = text;
  }else {
    element.innerText = text;
  }
}