js之DOM操作

发表于 | 分类于


DOM

1、Document Object Model: 文档对象模型。DOM 定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。DOM就是由节点组成的。
2、DOM顶级是html节点
3、HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
4、所有的节点组成的就是DOM树。节点包括：元素节点：HMTL标签。文本节点：标签中的文字（比如标签之间的空格、换行）。属性节点：：标签的属性。

增删查元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 获取body和html节点
document.body
document.documentElement

// 获取元素
document.querySelector("#id")
document.querySelector('.class1') // 假如有2个class1取第一个
document.querySelectorAll(".class")[0]
document.querySelector(".class input[type=text]")

// 获取父元素
document.querySelector('#id').parentNode

// 获取子节点
let el = document.querySelector('#id')
el.firstElementChild // 获取第一个子元素
el.lastElementChild // 获取最后一个子元素
el.firstChild // 获取第一个子节点，不实用
el.lastChild // 获取最后一个子节点，不实用

// 获取兄弟节点
let el = document.querySelector('#id')
el.nextElementSibling // 获取下一个元素节点
el.previousElementSibling // 获取上一个元素节点
el.nextSibling // 获取下一个节点，不实用，因为换行也是一个节点
el.previousSibling // 获取上一个节点，不实用，因为换行也是一个节点

// 获取所有兄弟元素
let el = document.querySelector('#id')
el.parentNode.children // 获取所有子元素
el.parentNode.childNode // 获取所有子节点

// 增加元素
let $el = document.createElement("div")
$el.innerHTML = "nihao"
document.querySelector("body").appendChild($el)

// 删除元素
let $div = document.querySelector(".className")
document.querySelector("body").removeChild($div)

// 复制节点
let $div = document.querySelector(‘.clsName’)
$div.cloneNode() // 只复制节点本身
$div.cloneNode(true) // 复制节点和所有子节点

增删改查class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let el = document.querySelector('#id')
// 获取所有class
el.className // 返回的是字符串
el.classList  //返回的是数组
// 添加class
el.classList.add('class2', 'class1', 'class3')
// 删除class
el.classList.remove('class3')
//判断是否存在某个class
el.classList.contains("className")
// 获取单个class
el.classList.item(0) //class2
el.classList.item(1) // class1
// 替换class
el.classList.replace('class2', 'class6') // true, 最后为'class6 class1 class3'
// 替换class
el.classList.toggle('class1') // false, 因为有class1，所以删除，最后为‘class6 class3’
el.classList.toggle('classs4') // true, 因为没有class4,所以添加，最后为'class6 class3 class4'
删改查style
1
2
3
4
5
6
7
8
9
10
let el = document.querySelector('#id')
// 获取style
el.getAttribute('style') // 获取绑定在style属性上的全部值
el.style.color // 获取绑定在style属性上的值，不能取style属性，不然会获取很多内容
// 修改style
el.style.fontSize = '18px'
el.style.cssText = 'color: red; font-size: 20px;'
el.setAttribute('style', 'color: red; font-size: 16px;')
// 删除style
el.removeAttribute('style')
增删改查属性

let el = document.querySelector(‘#id’)

1
2
3
4
5
6
//设置属性
el.setAttribute("style", "background: #fff;")
//获取属性
el.getAttribute("style")
//删除属性
el.removeAttribute("style")

事件

DOM事件的级别
1
2
3
4
5
6
7
8
9
// DOM0：
element.onclick = function () {}
// 在html中，在onclick属性中，加js语句。

// DOM2：
 element.addEventListener('click', function () {}, false);

 // DOM3：增加很多事件类型，如键盘事件
 element.addEventListener('keyup', function () {}, false);
DOM事件模型

捕获和冒泡。

DOM事件流

讲的就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。
完整的事件流：（1）捕获：从 window 对象传到 目标元素。顺序是：window –> document –> html–> body –> 父元素、子元素、目标元素。
（2）目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
（3）冒泡：从目标元素传到 Window 对象。

常见事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
onclick
ondblclick // 双击
onkeyup // 释放键盘时
oninput // 文本框输入时
onchange // 文本内容改变时
onfocus // 文本框聚焦时
onblur // 失焦时
onmouseover // 鼠标移进事件源时
onmousemove // 鼠标在事件源移动时
onmouseout // 鼠标移出时
onload // 网页文档或文本或图片加载
onunload // 关闭网页时
onsubmit // 表单提交时
onreset // 重置表单时
事件绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 1、行内绑定
<div id="box1" onclick="fn()"></div> // 注意是fn(),这里被识别成字符串

<script type="text/javascript">
  function fn() {
    alert("我是弹出的内容");
  }
</script>

// 2、js中绑定
<div id="box1" ></div>

<script type="text/javascript">
  var div1 = document.getElementById("box1");
  div1.onclick = fn1
  div1.onclick = fn2 // 点击的时候只执行fn2,fn1被冲掉了
  function fn1() {
    alert("我是弹出的内容");
  }
  function fn2() {
    console.log(3)
  }
</script>

// 3、addEventListener绑定 推荐
element.addEventListener('click', fn, true)
// 1、true表示捕获阶段触发，false表示冒泡阶段触发(默认)
// 2、一般的浏览器：div -> body -> html -> document -> window
element.addEventListener('click', fn1)
element.addEventListener('click', fn2) // 点击的时候触发fn1和fn2
不能冒泡的事件:
blur、focus、load、unload、onmouseenter、onmouseleave
事件对象

1、触发DOM上的某个事件时，都会产生一个事件对象event。
2、兼容性：event = event || window.event(IE6,7,8)
3、event常用属性

1
2
3
4
5
6
7
event.bubbles // true表示事件可以冒泡，不是所有的事件都可以冒泡
event.stopPropagation() // 阻止冒泡，当bubbles为true可以使用
event.cancelable // 为true表示可以取消事件的默认事件
event.preventDefault() // 取消默认事件，当cancelable为true时
event.currentTarget // 执行事件时的那个元素，即currentTarget始终 === this
event.targget // 真正触发的事件的元素,比如事件点击的元素
event.type // 被触发的事件的类型,如'click','input'

样式

style和window.getComputedStyle的异同

同：getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
异：element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
getComputedStyle兼容性：IE支持9，其他均支持

记忆方法

clientWidth/clientHeight获取content+padding
clientTop/clientLeft获取border
offsetWidht/offsetHeight获取content+padding+border
offsetTop/offsetLeft不准确的理解为获取margin

获取元素的各种宽高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let el = document.querySelector('.cls1')
// 元素的所有宽高（content、padding、border）
el.offsetWidth
el.offsetHeight

// 元素的宽高（content和padding）
el.clientWidth
el.clientHeight

// 元素的border值
el.clientTop // 元素的上边框宽度
el.clientLeft // 元素的左边框宽度

// 元素的margin值
getComputedStyle(el).marginTop // 注意：展示的是数值带px
getComputedStyle(el).margin // 注意：展示的是数值带px，比如：'5px 6px 7px 8px'
元素的偏移量

offsetTop/offsetLeft：获取元素距离当前最近非position: static;父元素的上偏移/左偏移，假如父元素都是position: static;则指向body元素。假如元素有设定left,top,则按照此值来

1
2
el.offsetTop
el.offsetLeft

鼠标的偏移量

clientX：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；// 不常用
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；// 不常用
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

元素相对于浏览器的偏移量
1
2
3
4
5
let location = document.querySelector('#id').getBoundingClientRect() // 相对于去除菜单栏的窗口
location.top // 元素顶部相对于窗口的顶部距离
location.left // 元素左边相对于窗口的左边距离
location.bottom // 元素底部相对于窗口的顶部距离
location.right // 元素右边相对于窗口的左边距离
元素的滚动

scrollWidth/scrollHeight：获取元素的文档宽高，包含溢出部分，假如内容没有溢出，那就展示本身元素的宽高（padding+content）
scrollTop/scrollLeft: 获取元素滚动的举例

可视区域的宽高
1
2
document.documentElement.clientWidth
document.documentElement.clientHeight
浏览器的宽高
1
2
3
4
5
6
window.innerWidth //除去菜单栏的窗口宽度
window.innerHeight//除去菜单栏的窗口高度
window.outerWidth//包括菜单栏的窗口宽度
window.outerHeight//包括菜单栏的窗口宽度
window.screenTop//距离屏幕的高度
window.screenLeft//距离屏幕的宽度
电脑屏幕的宽高
1
2
3
4
window.screen.height//电脑屏幕的高度
window.screen.width//电脑屏幕的宽度
window.screen.availHeight//电脑屏幕的可利用高度
window.screen.availWidth//电脑屏幕的可利用宽度