15.1 DOM概览
15.2 选取文档元素
- getElementById()
function getElementId(){
var elements = {};
for(var i=0;i<arguments.length;i++){
var id = arguments[i];
var elt = documemt.getElementById(id);
if(elt == null){
throw new Error('no elements with id:' + id);
}
elements[id] = elt;
}
return elements;
}
- getElementsByName()
- getElementsByTagName()
- getElementsByClassName()
- querySelectorAll()/querySelector()
15.3 文档结构和遍历
- 作为节点树的文档
- parentNode
- childNodes：只读的类数组对象
两种方法可以将类数组对象转化为数组 :
- ES6中 Array .from()[需要编译]
-
- Array.prototype.slice.call(someNode.childNodes,0);
- firstChild / lastChild ：没有返回null
- nextSibling / prevSibling：这两个属性将节点之间以双向链表的形式连接起来
- nodeType
- nodeValue : Text节点或者Comment节点的文本内容
- nodeName：元素的标签名，以大写形式表示
- 作为元素树的文档
- firstElementChild / lastElementChild
- nextElementSibling / prevElementSibling
- childElementCount：返回子元素的数量 == children.length
15.4 属性
- html属性：document.getElementById('myimg').src;
- 设置获取非标准html属性
- getAttribute()
- setAttribute()
- hasAttribute()
- removeAttribute()
- 数据值属性
- HTML5中设置了"data-x" == dataset.x 例如：data-jquery-test == dataset.jqueryTest(驼峰表示法)
- Attr节点的属性：attributes属性，用法与childNode属性类似.
15.5 元素的内容
- 作为html元素的内容：
- innerHTML浏览器擅长解析HTML，但是“+= 效率低下，因为既要序列化又要解析”
- outerHTML:包含当前标签名的输出
- 作为纯文本的元素内容
- textContent：将指定元素中的多有后代Text节点简单的串联在一起
- innerText：不反悔
<script>标签内的内容，并试图表留意表格形式，针对某些表格元素<table>等相关元素都是只读属性
- 作为Text节点的元素内容:nodeValue属性保存text节点的内容。
textContent，innerHTML，innerText对比
15.6 创建插入删除节点
- createElement()
- cloneNode()[true深复制]-[false浅复制] / 除了IE浏览器，Document.importNode()方法也可以创建节点副本[第一个参数为要插入的节点，第二个参数如果是true则表示递归所有的后代节点]
- appendChild()
- insertBefore()[带插入的节点]-[已经存在的节点]
- removeChild()
- replaceChild()[新节点]-[需要代替的节点],是childNodes中的节点，包括文本节点注释节点
function embolden(n){
if(typeof n == "string"){
n = document.getElementById(n);
}//如果参数为字符串而不是节点，将其当做元素的id
var parent = n.parentNode;
var b = document.createElement("b");
parent.replaceChild(b,n);
b.appendChild(n);
}//用一个新的<b>元素代替 n 节点。并使n节点成为该元素的子节点
15.8 文档和元素的几何形状和滚动
- 文档坐标（整个网页的大小）和视口坐标（看见的窗口，不包括工具条收藏夹什么的）
- 查询窗口滚动条的位置
//以一个对象的x 和y属性的方式返回滚动条的偏移量
function getScrollOffsets(w){
//使用指定的窗口，如果不带参数则使用当前窗口。
w = w || window;
//除了IE8及更早的版本，其他浏览器都可以使用
if(w.pageXOffset != null) return {x:w.pageXOffset,y:w.pageYOffset};
//对标准模式下的IE
var d = w.documentl;
if(document.compatMode == "CSS1Compat")
return {x:d.documentElemet.scrollLeft,y:d.documentElemet.scrollTop};
//对怪异模式下的浏览器
return {x:d.body.scrollLeft,y:d.body.scrollTop};
}
- 查询窗口的视口尺寸
function getViewportSize(){
//使用指定的窗口，如果不带参数则使用当前窗口。
w = w || window;
//除了IE8及更早的版本，其他浏览器都可以使用
if(w.innerWidth != null) return {w:w.innerWidth,h:w.innerHeight};
//对标准模式下的IE
var d = w.documentl;
if(document.compatMode == "CSS1Compat")
return { w:d.documentElemet.clientWidth,
h:d.documentElemet.clientHeight };
//对怪异模式下的浏览器
return {x:d.body.clientWidth,y:d.body.clientHeight};
}
-
查询元素的几何尺寸：
- getBoundingClientRect()不需要参数，返回一个具有left,right,top,bottom四个属性的对象,left,top表示钙元素左上角的X和Y的坐标，right和bottom表示元素右下角的X和Y的坐标,返回的包含padding,不包含margin.
- 返回元素在视口中的位置
var box = e.getBoundingClientRect(); var offsets = getScrollOffsets(); var x = box.left + offsets.x; var y = box.top + offsets.y;在原始的IE中实现
var box = e.getBoundingClientRect(); var w = box.width || (box.right - box.left); var h = box.height || (box.bottom - box.top); -
滚动
- scrollTop()接受一个X和Y的坐标（文档坐标作为滚动条的偏移量设置他们）
- scrollIntoView()默认参数为将元素的上边缘或尽量接近视口的上边缘。false对应下边缘
var documentHeight = document.documentElement.offsetHeight;//获得文档高度
var viewportHeight = window.innerHeight;//或者 getViewportSize()//获取视口高度
window.scrollTo(0,documentHeight - viewportHeight);//滚动让最后一页在视中可见
