DOM元素的选取和创建

DOM

html里有head,body,div等等各种元素，元素本身有有各种属性，而JS是可以选中这些元素，并编辑它们的，选择后，元素就是成了JS操作的对象了，元素会有了一些对应的属性，对应的还会有一些方法，，，这样，就把html这个文档对象化了，用JS去操作这个文档，就是操作一个对象。

对象

• document对象及其属性

document.body
​…​​
​…​
​
​…​
​​​
​
​​​
document.head
​…​​
document.charset
"UTF-8"
document.doctype
document.readyState //返回当前文档的状态
loading :加载html没解析
interactive ：加载外部资源
complete ：完成

• document.location

document.location
Location {href: "http://www.jianshu.com/writer#/notebooks/14005525/notes/16978125/preview", ancestorOrigins: DOMStringList, origin: "http://www.jianshu.com", replace: function, assign: function…}ancestorOrigins: DOMStringListassign: function ()hash: "#/notebooks/14005525/notes/16978125/preview"host: "www.jianshu.com"hostname: "www.jianshu.com"href: "http://www.jianshu.com/writer#/notebooks/14005525/notes/16978125/preview"origin: "http://www.jianshu.com"pathname: "/writer"port: ""protocol: "http:"reload: function reload()replace: function ()search: ""toString: function toString()valueOf: function valueOf()Symbol(Symbol.toPrimitive): undefined__proto__: Location

document.location.href
"http://www.jianshu.com/writer#/notebooks/14005525/notes/16978125/preview"
document.location.protocol
"http:"
document.location.host
"www.jianshu.com"
document.location.port
""
document.location.search
""

document.location === location  //true
document.location === window.location  //true

document.location.assin('http://www.geogle.com')
//跳转页面

document.open(),document.close(),document.write()

document.write('hello')   //页面清空，出现文本hello,再重复操作一次，又输出一次，上一次不清空

原本的页面渲染完成之后，解析的文档就关闭了，这时候documen.write就是重新打开一个新文档，以前的渲染是已经关闭了的文档的。而这个时候，新文档一直打开着，所以，上一次不清空。直到document.close作用后，这个文档关闭，再运行document.write就会清空再重写了。不要随便用这玩意了哦。

Element

具体的元素，对象
DOM操作就是选择它，处理它。
页面上的节点有几个重要属性：

• 标签
• 元素类型
• 类名
• 元素id
• 子元素列
• 兄弟元素
• 父元素

document.getElementById('target')
document.getElementsByClassName('box')[0]
document.getElementsByName('username')
document.getElementsByTagName('div')    //标签
document.getElementsByTagName('body')  === document.body    //true
document.getElementsByClassName('box')[0].getElementsByClassName('child')   //嵌套

都是ES3里的，很烦。
ES5里，querySelector:

document.querySelector('.box .child')
document.querySelector('#target')
document.querySelector('div')      //只会选择第一个，不会多选
document.querySelectorAll('div')    //选了全部

在测试时，在控制台，选id的，可以直接写id就选中了，但是html中不能如此。

function $(selector){
    return document.querySelector(selection) 
}
$('#target')

创建

createElement

var div = document.createElement('div')   //虚拟节点，只是占内存，页面不显示
var text= document.createTextNode('jirengu')     //文本节点

createDocumentFragment
创建一个对象，针对它进行操作，然后再把它放到页面上，避免重新计算和渲染。存在于内存中的DOM片段，但是不属于当前文档。

修改元素

var div = document.createElement('div')
var content = document.createTextNode('hello')
div.appendChild('content')
div        //
hello

假设有个ul的class是navbar:
var navbarNode = document.querySelector('.navbar')
for (i=0;i<5;i++) {
        var child =document.createElement('li')
        var text =child.appendChild('i')
        navbarNode.appendChild(child)     //把li放到navbar的ul里
}

var fragment=document.createDocumentFragment()   //生成了一个虚拟的fragment标签，放到ul里就消失了
for(i=0;i<5;i++) {
      var child =document.createElement('li')
        var text = child.appendChild('i')
      fragment.appendChild(child)    
}
navbarNode.appendChild(frament)

 replaceChild(newElement,oldElement)
parentNode.removeChild(childNode)
node.cloneNode(true)        //深复制，元素及其子元素，false只复制元素本身