DOM-CSDN博客

本文链接：https://blog.csdn.net/qq_39224439/article/details/82952574

DOM操作

DOM，Document Object Model，文档对象模型
将HTML中的元素(标签)当做JS中的对象进行操作，就叫DOM操作
window表示浏览器中打开的窗口，document表示显示在窗口中的文档
DOM操作核心：找到对象、添加事件、修改样式、...
在JS中样式的书写采用的时小驼峰的命名规范，如：backgroundColor
控制台输出：console.log()

查找元素

document.getElementById：根据ID属性，查找元素(一个)
document.getElementsByClassName：根据class属性，查找元素(多个)
document.getElementsByTagName：根据标签名，查找元素(多个)
document.getElementsByName：根据name属性，查找元素(多个)

JS事件

onclick：单击
onbdlclick：双击
onfocus：获取焦点
onblur：失去焦点
onmouseover：鼠标移入
onmouseout：鼠标移出

定时器

说明：所谓定时器，就是在指定的时间做指定的事情
分类：
- 一次性定时器：设置一个时间，时间一到，执行指定的操作，之后定时器销毁。
  - 设置：var timer = setTimeout(函数, 时间) //时间的单位是毫秒
  - 清除：clearTimeout(timer)
- 周期性定时器：设置一个间隔，时间一到，执行指定的操作，然后重新计时。
  - 设置：var timer = setInterval(函数, 时间)
  - 清除：clearInterval(timer)
说明：
- 定时器任务正在执行时，即使清除定时器，操作也不会立即停止，会等当次操作结束后停止。

window

事件：
- onload：当页面加载完毕，包括非文本资源，若JS放在开头，一定要保证网页加载完成再进行操作
- onresize：当页面的尺寸发生改变时触发
属性：window的属性（即窗口的属性）
- innerWidth：宽度
- innerHeight：高度
- document：文档对象
  - document.write：向文档中写内容
  - document.title：网页的标题

查找元素

上一个同胞：var pre = oushu.previousElementSibling || oushu.previousSibling（高级浏览器和低级浏览器的不同，就是获得相同属性时的方法的不同）
下一个同胞：var next = oushu.nextElementSibling || oushu.nextSibling
父级元素：var parent = oushu.parentNode
第一个子元素：var first = parent.firstElementChild || firstChild
最后一个子元素：var last = parent.lastElementChild || lastChild
连续查找：var uncle = oushu.parentNode.nextElementSibling

创建与删除

创建元素：var div = document.createElement('div')
添加元素：var div = document.createElement('div')
删除元素：grand.removeChild(parent)

window对象

事件
- onload：页面加载完成
- onresize：窗口尺寸更改
- onscroll：当窗口发生滚动时
属性
- innerWidth：宽度
- innerHeight：高度
- document
  - documentElement：相当于非H5的body元素
    - clientWidth：宽度
    - clientHeight：高度
    - scrollTop：垂直滚动距离
    - scrollLeft：水平滚动距离
  - body：非H5标准下使用

事件冒泡

说明：上层元素和下层元素同时支持一个事件，当上层元素事件触发，下层也触发，这种情况叫事件冒泡。
取消事件冒泡：var ev = event || e; ev.cancelBubble = true

事件绑定

说明：同一个事件触发时，调用多个处理函数，直接设置时后面会覆盖前面的，可以通过事件绑定加以解决。

示例：

// 兼容绑定事件
function addBind(obj, ev, func)
{
    if (obj.addEventListener) {
        // 高级浏览器
        obj.addEventListener(ev, func, false)
    } else {
        // 低级浏览器
        obj.attachEvent('on'+ev, func)
    }
}
// 兼容取消绑定事件
function delBind(obj, ev, func)
{
    if (obj.removeEventListener) {
        // 高级浏览器
        obj.removeEventListener(ev, func, false)
    } else {
        // 低级浏览器
        obj.detachEvent('on'+ev, func)
    }
}

事件源元素

说明：根据事件获取事件发生的元素，也就是改时间是发生在哪个元素上的
使用：var ev = e || event; var obj = ev.srcElement

点击的位置

说明：就是点击事件触发时，鼠标在窗口的偏移
使用：var ev = e||event; console.log(ev.clientX + 'x' + ev.clientY)

鼠标事件

onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起

获取元素属性(不带单位)

obj.offsetWidth：元素宽度（这种书写方式可以很方便的额获取元素的宽度）
obj.offsetHeight：元素高度
obj.offsetLeft：水平偏移
obj.offsetTop：垂直偏移

键盘事件

onkeydown：按键按下事件

按键的ASCII：ev.keyCode
是否按下了alt、shift、ctrl按钮

if (ev.altKey == true) {
    console.log('按下了alt键')
} else if (ev.ctrlKey == true) {
    console.log('按下了ctrl键')
} else if (ev.shiftKey == true) {
    console.log('按下了shift键')
}

禁用右键

示例

document.oncontextmenu = function () {
    // 返回false即可禁止右键显示菜单
    return false
}

禁止跳转

说明：a标签的onclick事件只要返回false即可禁止跳转，也可以通过事件函数返回false

示例：

<body>
    <a href="http://www.baidu.com" οnclick="return tiao();">百度一下</a>
</body>
<script>
    function tiao()
    {
        // 返回false即可禁止跳转
        return false;
    }
</script>