JavascriptDOM操作页面元素
Document
前言: document作为window的一个重要属性，可见document的所有知识点有多么重要。
节点类型知识
-
节点的类型 nodeType
- 1代表元素节点
- 2代表属性节点
- 3代表文本节点
- 8代表注释节点
-
节点的名字 nodeName
-
节点的值 nodeValue
document.defaultView
- 在浏览器中，该属性返回当前document对象所关联的window对象，如果没有，会返回null。
window.getComputedStyle(DOM元素)
- 作用: 获取最终对页面元素产生作用的样式（可以理解为元素渲染完成之后当前元素全部计算后的样式）。
- 两个参数：要取得计算样式的元素和一个伪元素字符串（例 如":after"）,如果不需要伪元素信息，第二个参数可以是 null。
- 返回值: window.getComputedStyle(DOM元素) 返回 CSSStyleDeclaration 对象表示一个 CSS 属性-值（ 注意: 是css属性-值 dom的scrolltop不是属性,获取不到的 ）（property-value）对的集合。
计算样式的只读
- 无论在哪个浏览器中，最重要的一条是要记住所有计算的样式都是只读的；不能修改计算样式对象中的 CSS 属性。
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
获取一个元素没有设置的属性,此时有一个默认值为 0px
- opacity: 默认值为 1
- zIndex: 默认值为 auto
兼容性问题
- IE 不支持 getComputedStyle()方法，但它有一种类似的概念。在 IE 中，每个具有 style 属性 的元素还有一个 currentStyle 属性。
- 这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式。
var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
自定义属性
- 设置自定义属性： DOM对象.setAttribute（‘属性名’，‘属性值’）|| lis[i].index=i;
- 获取自定义属性: DOM对象.getAttribute(‘属性名’);
- 移除自定义属性： DOM对象.removeAttribute（‘属性名’）;
- 随着浏览器版本升级，H5的自定义属性就可以用来存储一些数据。
H5的自定义属性
<div class="box" data-name="box">我是boxdiv>
获取
console.log(box.dataset.xxx)
通过Js的方式设置自定义属性-(表现到HTML标签上)
- DOM对象.dataset.属性名 = ‘属性值’;
- DOM对象.dataset[‘属性名’] = ‘属性值’;
与Jquery的data方法的区别
- jquery.data() 操作内存数据的 不会在DOM标签上显现的。
- H5的dataset 操作DOM属性的 它可以在HTML标签上显现;
innerHTML 与innertext区别
获取：
-
innerHTML 原封不动把内容获取到包括换行和空白。
-
innerText 内容有标签，过滤标签，前后的换行和空白都去掉。
-
innerHTM = ‘’; 会清空DOM对象中的所有内容。 其实innerHTML就是给DOM对象重新赋值的。所以会干掉元素原来的内容，重新赋值新的内容。
设置：
- innerHTML 设置的时候，会把标签解析。
- innerText 设置的时候, 不会解析标签。
innerText和textContent的相同点:
- 共同点:innerText 和 textContent 获取内容的时候，如果内容中有标签，会把标签过滤掉。
innerText和textContent的不同点:
- 不同点:textContent 原封不动的把内容输出,包括换行和空白。
js调用事件
// 其实就是点击按钮的回调，交给js主动去做了。对象名.事件名（）；不加on
let btn = document.getElementById('btn')
btn.onclick = function() {
console.log('点击了')
}
btn.click() // 直接会触发点击的回调
动态创建元素
1: document.write()输出内容。
2: box.innerHTML = ‘我是a标签’; 注意: 会干掉原有标签内部的节点替换为新添加的内容。
3: document.createElement(‘标签的名字’) 在内存中创建一个元素; 注意: 创建完毕以后注意要插入元素，被浏览器渲染引擎渲染。
let node =document.createElement('h1')
node.innerHTML = '我是新创建的元素innerHtml'
document.documentElement.appendChild(node)
获取DOM元素的方法
- document.documentElement 获取的DOM节点是html元素
- document.getElementsByTagName(‘html’)[0] 获取的DOM节点也是html元素
- document.body 获取的DOM节点是body元素。
常用的
- document.getElementById(‘id名称’) 上下文必须是document调用。
- Element.getElementsByTagName(‘标签名’); 返回一个 伪数组
高级的：
- getElementsByName(‘name名’) 根据元素name属性获取元素 返回一个 伪数组 ，浏览器兼容性问题 ie 9以上兼容
- getElementsByClassName(‘类名’) 根据类名获取元素 返回一个伪数组 ，浏览器兼容性问题 ie9 +
根据CSS选择器 获取元素：
- document.querySelector(‘#app’) 传递的是选择器
- querySelector（‘选择器’） 返回第一个查找到的 元素 兼容性问题 ie 8 +
上下文可以是 = document / 也可以是一个DOM元素
- querySelectorAll（‘选择器’） 返回找到的所有元素 伪数组 兼容性问题 ie 8 +
上下文可以是 document / 也可以是一个DOM元素
获取DOM对象的子元素
- box.children[index];
- box.firstChild 获取第一个子节点。兼容性问题 IE9以后。
- box.firstElementChild 获取第一个子元素（标签）。 同last。
- childNodes 获取子节点集合。 也会获取元素 属性 文本 换行也属于文本 注释节点。一般不用。
- children 获取子元素(标签)的集合。 也可以遍历。
- 获取集合是实时更新的 里边的元素变化 索引也在重排， children 是一个动态集合（伪数组）。
获取兄弟节点
- 获取下一个兄弟节点 nextSibling
- 获取下一个兄弟元素 nextElementSibling
- 获取上一个兄弟节点 previousSibling
获取父节点
- parentNode 只返回一个父元素。
元素的操作方法
父子追加
- Node.appendChild() 追加元素 到指定的父元素里面, 如果原来有这个标签会发生物理移动，原来的位置，移动到新位置。
- Node.insertBefore(插入的元素,参照的元素)
方法是在指定的已有的节点之前插入新的节点,如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置。
父子移除
- Node.removeChild (要移除的子元素)
父子替换
- Node.replaceChild(newChild,oldChild’)与字符串的replace参数正好相反。
H5中新增 操作元素类样式方法
.classList
- 当前元素的所有的样式名列表集合。
为下面这几个是原来类名基础上添加相应的类名。
- classList.add()
- classList.remove()
- classList.toggle()
与className的区别
- DOM.className = ‘类名’ 新类名直接覆盖掉原有HTML所有的HTMLclass样式特性。
访问元素的行内样式
style属性指定的内联样式表信息:
- 任何支持 style 特性的 HTML元素在 JavaScript 中都有一个对应的 style 属性 , 这个 style 对象 是 CSSStyleDeclaration 的实例。包含着通过 HTML 的 style属性指定的内联样式表信息(不包含与外联样式表或嵌入式样式表的样式)。
获取: DOM.style
设置: DOm.style.width = ‘xxx’
重写元素行内样式的style特性
2、cssText
- 通过cssText 属性可以访问 html元素 style属性中的CSS代码。
- 在读取模式下，cssText 返回浏览器对style 特性中 CSS 代码的内部表示cssTest: “color: blue; font-size: 100px”;
- 在写入模式下，赋给 cssText 的值会重写html元素上style 的值的，重写方式 dom.style.cssText = “color: red; font-
size: 100px”
重写元素的className
- 语法: dom.className = ‘xx’
- 直接赋值就重写了，重写的后果是，通过class给元素添加的样式就被干掉了。
Javascript中某个元素在网页上确切位置的相关知识?
一、基本概念理解
- 制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置，元素的X和Y坐标可以相对于文档的左上角或者相对于视口的左上角。（两个参照物）
- 在顶级窗口和标签页中，”视口“只是实际显示文档内容的浏览器的一部分：它不包括浏览器的“外壳”（如菜单、工具条和标签页）。
- 无论在何种情况下，当讨论元素的位置是，必须弄清楚所使用的坐标是文档坐标还是视口坐标。
- 如果文档比视口要小，或者说还未出现滚动，则文档的左上角就是视口的左上角，文档和视口坐标系统是同一个。
- 但是一般来说，要在两种坐标系之间互相转换，必须加上或减去滚动的偏移量（scroll offset）。
二、举例
- 在文档坐标中如果一个元素的Y坐标是200像素，并且用户已经把文档向上滚动了75像素，那么视口坐标中元素的Y坐标就是125像素。同样，在视口坐标中如果一个元素的X坐标是400像素，并且用户已经水平滚动了文档200像素，那么文档坐标中像素的X坐标中元素的X坐标就是600像素。
- 文档坐标比视口坐标更加基础，并且在用户滚动是他们不会发生变化。不过，在客户端编程中使用视口坐标是非常常见的。
三、获取方式一
- 将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。
- offsetParent 获取距离自己最近具有定位的父元素，直至获取都body元素。
- 注意、由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。
二、 但是最简单的查询元素位置的方法：getBoundingClientRect() 返回视口坐标中的位置。
设置元素大小 (如果文档的高度超出了浏览器窗口或者说的视口，那么就可以滚动页面,那么每次滚动页面这个属性返回的值都会变化，因为元素参照的是浏览器窗口取值得)
IE、Firefox 3+、Safari 4+、Opera 9.5及 Chrome为每个元素都提供了一个 getBoundingClientRect()方法返回会一个矩形对象，
包含 4 个属性：left、top、right 和 bottom。这些属性给出了元素在文档中相对视口的位置。
// 矩形对象
// bottom: 782.2857284545898
// height: 84.5714340209961
// left: 20
// right: 480.0000305175781
// top: 697.7142944335938
// width: 460.0000305175781
// 返回元素在文档中的位置
var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top + document.documentElement.scrollTop;
// 目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
四、缺点
- 在某些情况下，这个函数返回的值可能会有所不同，例如使用表格布局或使用滚动元素的情况下。
- 如果浏览器不支持使用自己封装一个跨浏览器的函数，计算元素相对于视口的位置，先获取元素在文档的位置，减去文档滚动出去的距离模拟出上面的矩形对象。
五、废话不多说，直接上图
偏移量 offset
1：兼容性问题: 所有主流浏览器都支持这种属性
2：该属性的获取不管元素是否脱离文档流
3：这些属性都是只读的; 但是滚动大小有两个属性比较特殊。
4：dom.offsetLeft系列获取的值是就近取整。虽然页面上元素设置了 23.27偏移量，但是获取的是23，必要的时候使用Math函数挽救。
偏移量
获取距离具有定位父元素的内壁（边框以内），默认是 body左侧内壁的偏移量。
例如视口的高度为900px, 一个元素距离文档坐标，1200px, 那么offsetTop获取的就是1200px
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。 参照的
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的） 水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂 直滚动条的宽度、左边框宽度和右边框宽度。
客户区域 client
注意: --------- 这个属性当初一直理解错误了。还以为都是可视区的宽度呢？
这个获取具体多大的值，是根据调用该方法的DOM元素决定。
例如:
通过DOM获取文档总高度 但是Window对象也有 IE8之后也有自己的特有该属性啦
IE8 及更早版本没有提供取得当前浏览器窗口尺寸的属性， 但是
通过 DOM 提供了页面可见区域 的相关信息和上面的可见视口获取的值一样 ( 同移动端 )
通过 document.documentElement.clientWidth
根html元素访问该属性,那就是视口的大小，因为根html默认有一个滚动条，只要文档中的内容超过，视口的大小
这个滚动条就会出来, 而clientWidth获取不到内容滚动出去的距离。
通过 document.body.clientWidth那就是body元素内部的内容的大小。
客户区大小的属性有两个：clientWidth 和 clientHeight
指的是元素内容及其内边距所占据的空间大小（不包括滚动条的大小）。
其中，clientWidth 属性是元素内容区宽度加 上左右内边距宽度；
从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。
注意: 图上说的可视区，单纯指的是这一个元素，这个元素固定大小，内容超过
父元素出现滚动条，内容滚动。
box.clientLeft: 它返回一个数值，该数值代表元素的左边框宽度。
滚动大小 scroll
指的是包含滚动内容的元素的大小。有些元素（例如html元素），即使没有执行任何代码也能自动地添加滚动条；
但另外一些元素，则需要通过 CSS 的 overflow: auto / scroll 属性进行设置才能滚动。
scrollHeight：元素内容的总高度（包括了滚动出去的内容的大小）。 如果一个元素高为500px 内容1000px； 访问该属性返回1000px;
scrollWidth：元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数。（滚动出去的距离）通过设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数。（滚动出去的距离）通过设置这个属性可以改变元素的滚动位置。
想要设置内容滚动到指定top/left下 内容必须要超出该元素的容器，并且含有有滚动条的。
在确定文档的总高度时必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，
才能保证在跨浏览器的环境下得到精确的结果。下面就 是这样一个例子。
var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
前者获取的是文档总高度，包括可视区以外的内容，后者是获取视口的高度。
获取页面文档滚动出去的距离
var scrollTop = document.documentElement.scrollTop
var scrollLeft = document.documentElement.scrollLeft
阻止浏览器默认行为
取消默认事件 a链接的 和submit的默认表单提交
1.return false
2.JavaScript:void(0)
3.e.preventDefault() submit取消
4.e.returnValue = false;