js高程（3.6）

BOM

• window对象
  在网页中定义的任何一个对象、变量和函数，都以window作为其global对象，因此有权访问parseInt（）
  全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以

var age=29
window.color='red'
//在ie《9时抛出错误，在其他所有浏览器中都返回false
delete window.age
//在IE《9时抛出错误，在其他浏览器中都返回true
delete window.color
console.log(window.age)//29
console.log(window.color)//undefined

var newValue=oldValue;//出错，因为oldValue未定义
var newValue=window.oldValue//不会出错，因为这是一次属性查询
console.log(newValue)

• 窗口大小
  

var pageWidth=window.innerWidth
var pageHeight=window.innerHeight
if(typeof pageWidth!='number'){
    if(document.compatMode==CSS1Compat){
        pageWidth=document.documentElement.clientWidth
        pageHeight=document.documentElement.clientHeight
    }else{
        pageWidth=document.body.clientWidth
        pageHeight=document.body.clientHeight
    }
}

• 系统对话框

var result=prompt('what is your name?','')
if(result!==null){
    alert('welcome,'+result)
}

• location对象
  window.location和document.location引用的是同一个对象

var url=document.location.href
console.log(decodeURIComponent(url))
document.URL===location.href//true
//p207介绍了location对象的属性

DOM

• node类型
  元素节点：1；属性节点：2；文本节点：3

var html=document.documentElement
console.log(html.nodeType)//1

节点关系：每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组，用于保存一组有序的节点，可以通过位置来访问节点。请注意，虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它不是Array的实例
将NodeList转换成数组

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<leng;i++){
            array.push(nodes[i])
        }
    }
}

• 节点属性

  • parentNode
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling
  • childNodes
  • ownerDocument
  • 方法
  • hasChildNodes()//返回true/false
  • someNode.appendChild(newNode)//返回新增的节点，可以从原来的位置转移到新位置
  • someNode.insertBefore(newNode,null)//返回新增的节点，如果参照节点是null则和appendChild（）一样
  • replaceChild（newNode，x）
  • cloneNode(参数)//参数为boolean，为true是深复制，就是复制节点及其整个节点树，false是浅复制，只复制节点本身

• 文档信息

  • document.title
  • document.domain
  • document.URL===location.href
  • document.referer
• 查找元素

var images=document.getElementsByTagName('img')
images.length
images[i].src
images.item(i).src
images.namedItem('myImage')//name="myImage"
images['myImage']
document.getElementsByName('myImage')

• 特殊集合
  
  • document.anchors//所有带有name的a元素
  • document.forms
  • document.images
  • document.links//所有带有href的a元素
• DOM一致性检测

varhasXmlDom=document.implementation.hasFeature('XML','1.0')

• HTML元素属性
  
  • id
  • className
  • title
  • lang
  • dir//语言的方向
• 取得属性
  
  • getAttribute
  • h5中data-用dataset.xxx
  • div.id div.align
• 设置属性
  
  • setAttribute(‘id’,’some’)
  • div.id=”
• 删除属性
  
  • removeAttribute()
• attributes属性
  
  • getNamedItem(name)//name为noneName
  • removedNamedItem(name)
  • setNamedItem(node)
  • item(pos)

var element=document.querySelector('ul')
element.attributes['id'].nodeValue='otherId'
element.attributes.removeNamedItem('id')
var typ=document.createAttribute("class");//这个很关键
typ.nodeValue="democlass";
element.attributes.setNamedItem(typ)

• text类型
• nodeName为’#text’
• nodeValue为’文本’，或者data
• 创建文本节点：
• document.createTextNode('hello world')
• normalize()会将文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值
• 文档片段
• 优点：渲染少
• document.createDocumentFragment()
• Attr类型

var attr=document.createAttribute('align')
attr.value='left'//或者nodeValue
element.setAttributeNode(attr)
element.attributes['align'].value//left
element.getAttributeNode('align').value
element.getAttribute('align')

• 创建表格

var app=document.querySelector('.app')
var table=document.createElement('table')
var tbody=document.createElement('tbody')
table.appendChild(tbody)
tbody.insertRow(0)
tbody.rows[0].insertCell(0)
tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1 1'))
tbody.rows[0].insertCell(1)
tbody.rows[0].cells[1].appendChild(document.createTextNode('cell 2 1'))