01|DOM变化
-
Node类型的变化
- localName：不带命名空间前缀的节点名称。
- namespaceURI：命名空间 URI 或者（在未指定的情况下是）null。
- prefix：命名空间前缀或者（在未指定的情况下是）null。
-
Document类型的变化
- createElementNS(namespaceURI, tagName)：使用给定的 tagName 创建一个属于命名空
间 namespaceURI 的新元素. - createAttributeNS(namespaceURI, attributeName)：使用给定的 attributeName 创
建一个属于命名空间 namespaceURI 的新特性. - getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间 namespaceURI
的 tagName 元素的 NodeList.
- createElementNS(namespaceURI, tagName)：使用给定的 tagName 创建一个属于命名空
-
Element类型变化
- getAttributeNS(namespaceURI,localName)：取得属于命名空间 namespaceURI 且名为
localName 的特性 - getAttributeNodeNS(namespaceURI,localName)：取得属于命名空间 namespaceURI 且
名为 localName 的特性节点 - getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间 namespaceURI
的 tagName 元素的 NodeList - hasAttributeNS(namespaceURI,localName)：确定当前元素是否有一个名为 localName
的特性，而且该特性的命名空间是 namespaceURI - removeAttriubteNS(namespaceURI,localName)：删除属于命名空间 namespaceURI 且名
为 localName 的特性 - setAttributeNS(namespaceURI,qualifiedName,value)：设置属于命名空间 namespace�URI 且名为 qualifiedName 的特性的值为 value
- setAttributeNodeNS(attNode)：设置属于命名空间 namespaceURI 的特性节点
- getAttributeNS(namespaceURI,localName)：取得属于命名空间 namespaceURI 且名为
-
NamedNodeMap类型的变化
- getNamedItemNS(namespaceURI,localName)：取得属于命名空间 namespaceURI 且名为
localName 的项 - removeNamedItemNS(namespaceURI,localName)：移除属于命名空间 namespaceURI 且名
为 localName 的项 - setNamedItemNS(node)：添加 node，这个节点已经事先指定了命名空间信息
- getNamedItemNS(namespaceURI,localName)：取得属于命名空间 namespaceURI 且名为
-
框架的变化
访问内联文档的框架对象,如果说内联宽假来自其它域或者不同子域,或者使用了不同的协议,那么访问对应的文档对象的时候就会报错!
const myFrame = document.getElementById("myFrame");
const frameDocument = myFrame.contentDocument || myFrame.contentWindow.document;
02|样式
其中比较重要的就是偏移量
- offsetLeft/offsetTop 元素边框到包含元素内边框的距离
- offsetWidth/offsetHeight 元素宽高包括滚动条,边框
- offsetParent:保存包含元素的引用
offset.png
获取元素在页面中的偏移量:
const getElementLeft = element=>{
let actualLfet = element.offsetLeft;
let current = element.offsetParent;
while(current!==null){
actualLfet += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
const getElementTop = element=>{
let actualTop = element.offsetTop;
let current = element.offsetParent;
while(current!==null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
需要注意的点就是,偏移量是只读的,每次获取都需要重新计算,因此建议用第三方变量保存偏移量的值! 提升性能
客户区大小:
- clientWidth:元素内容及其内边距所占据的宽度大小
- clientHeight:元素内容及其内边距所占据的高度大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>JS Bin</title>
<style type="text/css">
border:1px dashed red;
width:100px;
height:100px;
</style>
</head>
<body>
<div id="mydiv" data-appid="12345" data-myname="probedream"></div>
<script>
const getElement = selector=>document.querySelector(selector)
console.log(getElement("#mydiv").clientWidth);//100
</script>
</body>
</html>
获取视口大小:
let clientWdith = document.body.clientWidth || document.documentElement.clientWidth;
let clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
滚动区域大小:
scrollHeight //在没有滚动条的情况下，元素内容总高度（内容+内边距）
scrollWidth
scrollLeft //被隐藏在内容区域左侧的像素数
scrollTop //被隐藏在内容区域上方的像素数,通过设置该值可以让滚动条滚动到响应位置
文档总高度兼容方案:
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let docHeight = Math.max(scrollHeight,clientHeight);
元素大小的确定:
getBoundingClientRect(client);
返回一个矩形对象,并且包含四个属性:
- left
- top
- right
- bottom
元素在页面中相对于视口的位置! 基本上最重要的或者说最基础的内容就差不多了!
网友评论