DOM
html里有head,body,div等等各种元素，元素本身有有各种属性，而JS是可以选中这些元素，并编辑它们的，选择后，元素就是成了JS操作的对象了，元素会有了一些对应的属性，对应的还会有一些方法，，，这样，就把html这个文档对象化了，用JS去操作这个文档，就是操作一个对象。
对象
- document对象及其属性
document.body
<body class="input zh cn win reader-black-font">…</body><div class="shutdown">…</div><div id="writer" class="container-fluid" data-writer-version="44">…</div><script src="//cdn2.jianshu.io/assets/writing-faa004dce5ba8214fd37c5ac0c0a7c8c5d70c0249fac415efca4e8930d0ad329.js"></script><script id="init-script" type="text/javascript" charset="utf-8">…</script><div id="flash" class="hide"></div><script>…</script></body>
document.head
<head>…</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 //<div>hello</div>
假设有个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只复制元素本身
网友评论