DOM的重要核心

DOM的创建

1.document.write

2.innerHTML

3.createElement

8.2addEventListener事件监听方式

DOM的创建

1.document.write

用途：document.write() 方法直接向 HTML 文档中写入内容。如果文档已经加载完成（即页面已经加载完毕），使用 document.write() 会覆盖整个页面的内容

2.innerHTML

用途：innerHTML 属性用于获取或设置元素的HTML内容

javascript 复制代码

document.getElementById('myDiv').innerHTML = '<p>这是一个新的段落。</p>';

3.createElement

用途：createElement() 方法用于动态创建新的DOM元素

javascript 复制代码

var newElement = document.createElement('p');  
newElement.textContent = '这是一个新的段落。';  
document.body.appendChild(newElement);

区别

innerHTML比document.write()更加灵活，因为它允许你精确地控制DOM的某一部分，而不是整个页面。
与innerHTML相比，createElement提供了更细粒度的控制，因为它允许你逐个创建和配置元素，然后再将它们添加到DOM中。这对于构建复杂的DOM结构特别有用。

2.增加

1.appendChild

javascript 复制代码

   var p=document.createElement("p");
        //添加元素节点 node.appendChild(newNode)
           document.body.appendChild(p);
        p.appendChild(document.createTextNode("我是新创建的节点"));

2.insertBefore

javascript 复制代码

    ul.insertBefore(li,ul.children[0]);

3.删除

parentNode .removeChild

javascript 复制代码

   for(var i=0;i<a.length;i++){
            a[i].onclick=function(){
                var li=this.parentNode;
                ul.removeChild(li);
            }

4.改

参考文章https://mp.csdn.net/mp_blog/creation/editor/141200432

主要修改dom的元素属性, dom元素的内容、属性,表単的值等

修改元素属性: src、 href、 title等

2.修改普通元素内容: innerHTML、 innerText

3.修改表単元素: value、type、 disabled等

4.修改元素祥式: style、 className

5.查

主要获取查询dom的元素

DOM提供的API方法: getElementByld、 getElementsByTagName 古老用法不太推荐
H5提供的新方法 : querySelector、 querySelectorAll 提倡

3.利用子节点操作获取元素：父（parentNode）、子（ childern）、兄（previousElementSibling 、nextElementSibling）

6.属性操作

主要针対于自定义属性。

1.setAttribute(attributeName, value):设置dom的属性値

javascript 复制代码

var elem = document.getElementById("myElement");  
elem.setAttribute("title", "这是新的标题");

getAttribute(attributeName) :得到dom的属性値

javascript 复制代码

var elem = document.getElementById("myElement");  
var title = elem.getAttribute("title");  
console.log(title); // 输出：这是新的标题

removeAttribute(attributeName)移除属性

javascript 复制代码

var elem = document.getElementById("myElement");  
elem.removeAttribute("title");

7.事件操作

鼠标事件

|-------------|--------------------|
| 鼠标事件 | 触发条件 |
| click | 点击 |
| dblclick | 双击 |
| mousedown | 鼠标按下 |
| mouseup | 鼠标松开 |
| mousemove | 鼠标移动 |
| mouseenter | 鼠标进入元素 |
| mouseleave | 鼠标离开元素 |
| contextmenu | 网页中禁止鼠标右键菜单和禁止选中文字 |

鼠标事件补充：

通过CSS：对于不支持selectstart事件的浏览器，你可以使用CSS的user-select属性来禁止选中文本
selectstart禁止选中文字事件

javascript 复制代码

<head>  
    <title>禁止右键和选中</title>  
    <style>  
        body {  
            -webkit-user-select: none; /* Chrome, Safari, Opera */  
            -moz-user-select: none;    /* Firefox */  
            -ms-user-select: none;     /* IE 10 and IE 11 */  
            user-select: none;         /* Standard syntax */  
        }  
    </style>  
    <script>  
        document.addEventListener('DOMContentLoaded', function() {  
            // 禁止整个文档的右键菜单  
            document.body.addEventListener('contextmenu', function(e) {  
                e.preventDefault();  
            }, false);  
  
            // 禁止整个文档的文本选中（虽然CSS已经处理了大部分情况）  
            document.body.addEventListener('selectstart', function(e) {  
                e.preventDefault();  
            }, false);  
        });  
    </script>  
</head>  
<body>  
    <p>这里不能右键，也不能选中文字。</p>  
</body>

鼠标事件对象

常用属性

鼠标事件对象包含了许多有用的属性，以下是一些最常用的：

|-------------------------------------------------------------------------|------------------------------------------|
| 常见属性 | 说明 |
| type | 返回事件的类型，如 "mouseenter", "mouseleav"等 |
| target | 返回触发事件的元素 |
| currentTarget | 返回其事件监听器触发该事件的元素 |
| clientX/clientY | 鼠标指针在视口中的X和Y坐标（不包括滚动条滚动的部分） |
| pageX/pageY | 鼠标指针在页面上的X和Y坐标（包括滚动条滚动的部分） |
| screenX 和 screenY | 鼠标指针在屏幕上的X和Y坐标 |
| button | 指示哪个鼠标按钮被点击 |
| ctrlKey、shiftKey、altKey、metaKey （在Mac上是Cmd键，在Windows上是Windows键） | 表示事件发生时是否同时按下了这些修饰键 |

代码示例

javascript 复制代码

console.log('鼠标的clientX坐标:', event.clientX);  
        console.log('鼠标的clientY坐标:', event.clientY);  
        console.log('鼠标的pageX坐标:', event.pageX);  
        console.log('鼠标的pageY坐标:', event.pageY);

键盘事件

|----------|-------------|
| 键盘事件 | 触发条件 |
| keydown | 键盘按下 |
| keyup | 键盘松开 |
| keypress | 按键被按下并释放一个键 |

keydown 和keypress区别：

keydown下键盘上的任意键时触发，keypress对于功能键不触发
大小写敏感性：keypress事件能够区分字母的大小写（它返回的是字符的ASCII码值），而keydown事件则不区分（它返回的是按键的物理码，将大写和小写视为同一个键）

代码示例

javascript 复制代码

    <script>
        // 键盘按下事件
        document.addEventListener('keydown', function(e) {
            if(e.key === 'Enter'){
                alert('按下了回车键');
            }
        })
        
      //  键盘按住事件
        document.addEventListener('keyup', function(e) {
            if(e.key === 'Shift'){
                alert('按住了Shift键');
            }   else if(e.key === 'Control'){
                alert('按住了Control键');
            }   else if(e.key === 'Alt'){
                alert('按住了Alt键');
            }
        })
        
        // // ��标按下事件
        document.addEventListener('keypress', function(e) {
            if(e.key === 'a'){
                alert('按下了a键');
            }   else if(e.key === 'b'){
                alert('按下了b键');
            }   else if(e.key === 'c'){
                alert('按下了c键');
            }
        })
    </script>

键盘事件属性

|----------------------------------------------------------------|-----------------------------------------|
| 键盘事件对象 | 说明 |
| key | 返回一个表示实际按下的键的字符串 |
| code | 返回一个表示按键物理位置的字符串 |
| altKey、ctrlKey、shiftKey、metaKey（在Mac上是Cmd键，在Windows上是Windows键） | 这些布尔属性表示事件发生时是否按下了对应的修饰键 |
| charCode（仅限keypress事件） | 在keypress事件中，这个属性表示按键的Unicode字符编码 |
| location | 表示按键在物理键盘上的位置（如果有多个相同类型的键，如左右两侧的Shift键） |
| repeat（仅限keydown事件） | 如果事件是由于用户持续按住键而产生的自动重复，则为true；否则为false |

表单事件

|----------|-----------|
| 表单事件 | 触发条件 |
| focus | 元素获得焦点 |
| blur | 元素失去焦点 |
| change | 表单元素的内容改变 |

页面事件

|----------|----------|
| 页面事件 | 触发条件 |
| load | 页面加载完成 |
| resize | 窗口大小改变 |
| scroll | 页面滚动 |

8.注册事件

8.1传统注册方式

利用on开头的事件onclick
<button οnclick="alert('hi~")></button>
btn.οnclick=function(){}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册处理函数将会覆盖前面注册处理的函数

8.2addEventListener事件监听方式

eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上，当该对象触发指定的事件时,就会执行事件处理函数。

基本语法

javascript 复制代码

element.addEventListener(event, function, useCapture);

参数：

element: 要添加事件监听器的 DOM 元素。
event: 要监听的事件类型（如 "click", "mouseover", "keydown" 等）。
function: 当事件发生时，要执行的函数。这个函数通常被称为事件处理函数或事件监听器。
useCapture (可选): 一个布尔值，指定事件是否在捕获或冒泡阶段执行。默认为 false，即事件在冒泡阶段执行。

监听点击事件

javascript 复制代码

// 获取元素  
var button = document.getElementById("myButton");  
  
// 添加点击事件监听器  
button.addEventListener("click", function() {  
  alert("按钮被点击了！");  
});

监听多个事件

javascript 复制代码

var div = document.getElementById("myDiv");  
  
// 监听点击事件  
div.addEventListener("click", function() {  
  console.log("点击了 div");  
});  
  
// 监听鼠标移入事件  
div.addEventListener("mouseover", function() {  
  console.log("鼠标移入了 div");  
});

移除事件监听器

使用 removeEventListener 方法可以移除之前通过 addEventListener 添加的事件监听器。

javascript 复制代码

var button = document.getElementById("myButton");  
  
function handleClick() {  
  alert("按钮被点击了！");  
}  
  
// 添加事件监听器  
button.addEventListener("click", handleClick);  
  
// 移除事件监听器  
button.removeEventListener("click", handleClick);