DOM文档对象模型

2023-10-23  本文已影响0人  渚清与沙白

文档对象模型
DOM是js操作网页的接口。作用是将网页转换成一个js对象，可以通过脚本进行操作。
浏览器会根据DOM模型将HTML转换成节点，再由节点组成树状结构。

节点类型

Document: 整个文档树的顶层节点
DocumentType: doctype标签
Element: 网页的HTML标签
Attribute: 网页元素的属性（class、id ...）
Text: 标签之间或标签包含的文本
Comment: 注释
DocumentFragment: 文档片段

Node.nodeType属性
文档节点 Document: 9 , Node.DOCUMENT_NODE
元素节点 Element: 1 , Node.ELEMENT_NODE
属性节点 Attribute: 2 , Node.ATTRIBUTE_NODE
文本节点 Text: 3 , Node.TEXT_NODE
文档片段节点 DocumentFragment: 11 , Node.DOCUMENT_FRAGMENT_NODE

if(document.nodeType === Node.DOCUMENT_NODE){
    console.log('nodeType is 9')
}

Document

  1. document.write()
  2. innerHTML
  3. createElement
document.createElement('div');
document.createTextNode('hello);
document.createAttribute('id');

let text = document.createElement('p');
let content = document.createTextNode('world');
//appendChild 将内容或子元素放到容器中
text.appendChild(content);

let id = document.createAttribute('id');
id.value = 'root';
text.setAttribute(id);
  1. appendChild()
  2. insertBefore()
  1. removeChild()
// dom api
document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName
document.getElementById
// h5 api
document.querySelector('.center-box')
document.querySelectorAll('.center-box')
// node api
document.parentNode
document.children
document.nextSibling()
document.previousSibling()

let text = document.querySelector('div');
text.setAttribute()
text.getAttribute()
text.removeAttribute()

Element属性

js操作element的属性有id、className、classList、innerHTML 、 innerText

操作css

let box = document.getElementById('box');
// 1. html元素的style属性
box.setAttribute("style","width:100px;height:100px");

//2. 元素节点的style属性
box.style.width = '200px';
box.style.backgroundColor = 'red';

// 3. cssText属性
box.style.cssText = "width:100px;height:100px"

事件

事件分类：HTML事件、DOM 0级事件、DOM 2级事件 
<button onclick="click">HTML事件</button>
<script>
    function click(){

    }
</script>

缺点：HTML和JS没有分开

<button id="btn">DOM 0级事件</button>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function(){
      // 该事件会被覆盖
    }
    btn.onclick = function(){

    }
</script>

优点：HTML与JS分离
缺点：同一事件添加多次会覆盖之前的事件

<button id="btn">DOM2级事件</button>
<script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        console.log('点击了1')
    })
    btn.addEventListener('click',function(){
        console.log('点击了2')
    })
    // result 点击了1  点击了2
</script>

优点：事件不会被覆盖
缺点：书写麻烦

鼠标事件
鼠标事件Event事件对象

属性

let button = document.querySelector('button');
    button.onclick = function(e){
        // 第一种
        e.preventDefault();// 常用方式
        // 第二种
        e.returnValue;// ie 6 7 8的属性
        // 第三种
        return false;// return后面的代码不会执行
    };

let button = document.querySelector('button');
button.onclick = function(e){
     // 第一种
    e.stopPropagation();// 常用方式
    // 第二种
    e.cancelBubble = true;// ie 6 7 8的属性
};
键盘事件
键盘事件Event事件对象

属性

表单事件
<html>
    <body>
        <form id="myForm" action="url" onsubmit="submitHandle">
            <input type="text" name="username">
            <button id="resetBtn">重置</button>
            <button>提交表单</button>
        </form>
    </body>
    <script>
        let resetBtn = document.getElementById("resetBtn")
        let myForm = document.getElementById("myForm")
        resetBtn.onclick = function(){
            myForm.reset();
        }
        function submitHandle(){
            // submit提交函数
        }
    </script>
</html>
事件委托（事件代理）

把子元素的事件交给父元素统一处理。
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，不需要给每个子节点绑定事件。这种方式叫做事件的代理。
作用：只操作一次DOM，提高了性能

<html lang="en">
<body>
    <ul id="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <p>p元素</p>
    </ul>
</body>
<script>
    let ul = document.getElementById('list');
    // 给父节点 ul 添加事件
    ul.addEventListener('click',function(e){
        if(e.target.targetName.toLowerCase() === 'li'){
            console.log(`li标签触发事件: ${e.target.innerHTML}`)
        }
    })
</script>
</html>
移除事件
button.addEventListener('click',fn)
button.removeEventListener('click',fn)
function fn(){
     // 点击事件回调函数
}
DOM事件流

页面接收事件的顺序，即事件的传播过程

image.png image.png
  1. JS代码中只能在执行捕获或者冒泡其中的一个阶段
  2. onclick 和 attachEvent 只能的到冒泡阶段
  3. addEventListener(type,linstenr[,useCapture]) 第三个参数如果是true，表示事件在捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序。默认false
  4. 有些事件没有冒泡阶段，如onfocus、onblur、onmouseenter、onmouseleave
  5. 实际开发中很少使用事件捕获，主要使用事件冒泡
禁用鼠标右键和鼠标选中contextmenu、selectstart 
// 禁用鼠标右键弹出菜单
    document.addEventListener('contextmenu',function(e){
        e.preventDefault();
    })
    // 禁止鼠标选中
    document.addEventListener('selectstart',function(e){
        e.preventDefault();
    })
上一篇 下一篇

猜你喜欢

热点阅读