前端开发中JavaScript事件及DOM节点操作部分知识点

万古仙帝懒大王
111 阅读5分钟

事件处理三要素

  • 事件源：具体作用在哪个元素或标签上。
  • 事件类型：例如鼠标的点击，键盘的敲击。
  • 处理程序：指以函数的形式的事件触发后浏览器调用对应的处理程序，也称为事件函数。

语法：

事件源.on事件类型 = 事件处理函数
事件源.addEventlistener(事件类型，事件处理函数)
区别：
1.on绑定事件时，如果绑定了相同的事件，则后面的会覆盖前面的
add相同的事件可以绑定多次，执行也是顺序执行的
2.on绑定事件时，事件只能按冒泡模式执行 add绑定事件时，可以由用户在最后一个参数选择是冒泡还是捕获

<script>
  var btns=document.getElementsByID('button');
  console.log(alert("我就是0号按钮"));
</script>

事件介绍

例：鼠标事件、键盘事件、浏览器事件、触摸事件、表单事件等事件类型：

鼠标事件键盘事件浏览器事件触摸事件表单事件
click-鼠标单击keydown-键盘按下load -加载完毕touchstart-触摸开始focus -聚焦
dblclick -鼠标双击keyup -键盘抬起scroll -滚动touchmove -触摸移动blur -失焦
contextmenu-右键单击keypress-键盘键入resize -尺寸改变touchend -触摸结束change -改变
mousedown-鼠标按下input-输入
mouseup-鼠标抬起submit -提交
mousemove-鼠标在元素上移动reset-重置
mouseover-鼠标移到元素上方
mouseout-鼠标移出元素范围
mouseout-鼠标移出元素范围
mouseleave -鼠标移出

事件对象：

事件触发的时候，一个描述该事件信息的对象数据类型。
直接在事件处理函数接受形参
div.onclick = function(e){ console.log(e) }
注意:
1.如果是JS绑定事件，那么事件对象是事件被触发时JS主动传递的
2.如果是自己子啊html标签上行内绑定，则需要自己的传值

事件中常用的信息
坐标信息：
1.offsetX和offsetY(触发事件的X和Y轴)
2.clientX和clientY（浏览器窗口的水平坐标和垂直坐标）
3.pageX和pageY（整个页面的X和Y轴）

DOM

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

DOM节点操作：

创建节点、插入节点、删除节点、替换节点
创建：document.createElement('标签名称')

插入：父节点.appendChild(子节点)
父节点.insertBefore(要插入的子节点，哪一个子节点的前面)

删除：父节点.removeChild(子节点)
父节点remove()

替换：父节点.replaceChild(换上节点，换下节点)

获取元素方式：
两个静态获取：根据选择器（获取一个）、选择器（获取一组）获取
四个动态获取：根据id、元素类名、元素标签名、元素标签名（元素集合）获取。

静态：

根据选择器（获取一个）获取：
语法：document.querySelector(‘选择器’)
说明：在指定上下文中通过选择器获取第一个元素（只能获取一个），获取不到就是null

根据选择器（获取一组）获取：
语法：document.querySelectorAll(‘选择器’)
说明：在指定上下文中通过选择器获取一组元素集合，获取不到就是空元（通过数组方法取元素

动态：

根据id获取：
语法：document.getElementByid('id名')
说明：在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)

根据元素类名获取：
语法：document.getElementByClassName(‘类名’)
说明：通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合  (通过数组方法取元素）

根据元素标签名获取：
语法：document.getElementByName(‘标签名’)
说明：通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以我们一般应用于表单元素的处理）

根据元素标签名（元素集合）获取：
语法：document.getElementByTagName(‘标签名’)
说明：通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合  (通过数组方法取元素）

操作元素内容：

操作元素文本内容：
获取：元素.innerText
设置：元素.innerText='新内容'

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>文本内容</p>
    </div>
    
<script>
    //获取元素
    var ele = document.querySelector('div')
    //获取元素文本内容
    console.log(ele.innerText)
    //设置div内的文本内容
    ele.innerText = '新的文本内容'


</script>
</body>
</html>

操作元素文本内容：
获取：元素.innerText
设置：元素.innerText='新内容'

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>文本内容</p>
    </div>
    
<script>
    //获取元素
    var ele = document.querySelector('div')
    //获取元素文本内容
    console.log(ele.innerHTML)
    //设置div内的文本内容
    ele.innerHTML = '新的文本内容'


</script>
</body>
</html>

操作元素属性：

原生属性：
获取：元素.属性名
设置：元素.属性名 = '属性值'

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="box">div标签</div>
        <input type="password" name="" id="">

<script>
    //获取元素
    var box = document.querySelector('div')
    var inp = document.querySelector('input')
    //获取元素属性
    console.log(box.id)
    console.log(inp.type)


</script>
</body>
</html>

自定义属性：
获取：元素.getAttribute('属性名')
设置：元素.setAttribute('属性名','属性值')
删除：元素.removeAttribute('属性名')

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="box" hello="world">div标签</div>

<script>
    //获取元素
    var box = document.querySelector('div')
    //获取自定义属性
    var res = box.getAttribute('hello')
    console.log(res)


</script>
</body>
</html>

注意：上方法一般不用作操作元素类名和样式

操作元素类名：

获取：元素.class
设置：元素.className = '新类名'

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="box" hello="world" class="content">div标签</div>

<script>
    //获取元素
    var box = document.querySelector('div')
    //获取类名
    console.log(box.className)
    box.className = 'box'


</script>
</body>
</html>

操作元素行内样式：

获取：元素.style.样式名
设置：元素.style.样式名 = '样式值'

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div style="width: 100px; height: 100px; background-color: skyblue;">文本内容</div>

<script>
    //获取元素
    var box = document.querySelector('div')
    //获取类名
    console.log(box.style.width)
    console.log(box.style.height)
    console.log(box.style.backgroundColor)


</script>
</body>
</html>
avatar
文章
阅读
粉丝