2017-3-17(文档坐标、视口坐标/JSON )
review DOM操作
1.获取元素的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
document.getElementsByClassName()
document.body/document.documentElement/document.head
2. 设置给元素设置文本/值
ele.innerHTML 用于一般元素
ele.innerText 用于一般元素
ele.value 用于表单元素
3. 设置元素属性
ele.getAttribute("name") 获取
ele.setAttribute("name", "value") 设置
ele.removeAttribte("name") 移除
4. 创建元素
document.createElement("tagName");
5. 复制元素
ele.cloneNode(bol)
6. 插入元素
parentNode.appendChild(node)
parentNode.insertBefore(node, NumberChildNode)
7. 移除元素
parentNode.removeChild(node)
node.parentNode.removeChild(node)
node.remove()
8. 节点之间关系
parentNode.children 找到parentNode节点所有子元素
childNode.parentNode 找到childNode节点的父节点
node.previousElementSibling 上一个兄弟元素
node.nextElementSibling 下一个兄弟元素
9. node.nodeType
1 元素
2 属性
3 文本
9 document
11 documentFragment 文档碎片
1. 文档碎片documentFragment，优化，减少DOM引起的重绘重排
2. setInterval(), setTimeout() 异步函数
3. 文档坐标、视口坐标
文档坐标：参考文档，元素距离文档左上角的偏移值，固定的，不会变化
获取某个元素的文档坐标，x坐标 = 将该元素的左偏移值(offsetLeft)+(该元素定位父级的左偏移值+该元素定位父级的左边框宽度clientLeft)*n
y坐标 = 将该元素的上偏移值(offsetTop)+(该元素定位父级的上偏移值+该元素定位父级的上边框宽度clientTop)*n
function getPosition(ele) {
var parent = ele.offsetParent;
var x = ele.offsetLeft;
var y = ele.offsetTop;
while( parent ) {
//遍历定位父级
x = x + parent.offsetLeft + parent.clientLeft;
y = y + parent.offsetTop + parent.clientTop;
parent = parent.offsetParent;
}
return {x:x, y:y};
}
视口坐标：参考面，浏览器窗口
ele.getBoundingClientRect() 返回一个对象
{
top: ,
right: ,
bottom: ,
left: ,
width: ,
height:
}
IE 7 返回的对象不包括width,height
文档坐标、视口坐标相互转换
视口坐标.top + (document.documentElement.scrollTop || document.body.scrollTop)
视口坐标.left + (document.documentElement.scrollLeft || document.body.scrollLeft)
ele.offsetWidth/ele.offsetLeft
ele.clientWidth/ele.clientleft
ele.scrollWidth/ele.scrollLeft
4. JSON / XML
一种原生js轻量级数据交换格式，由道格拉斯·克罗弗德参考js字面量的对象所创造
js对象 {
name: "Shafee",
age: 20
}
JSON
{
"name": "Shafee",
"age": 20,
"schools":[{}, {}, {}]
}
后台数据返回来的都是json格式的字符串
5. 三种将json格式的字符串转换成对象， JSON内置的对象
a. JSON.parse(jsonStr)
b. new Function("return " + jsonStr)()
c. eval("(" + jsonStr + ")")
