JavaScript DOM API知识串讲-猿码集

JavaScript DOM API知识串讲

1. DOM是什么？

DOM，全称Document Object Model，指文档对象模型，是浏览器将HTML文档解析为树形结构，用来操作HTML元素的应用程序接口（API），可视为JavaScript访问和操作网页的接口。

2. DOM中的节点类型

DOM中的节点类型包括元素节点、属性节点、文本节点、注释节点等等，其中元素节点指的是HTML中的标签，而属性节点则是HTML标签上的属性，如下所示：

节点类型


    const p = document.createElement('p');
    const a = document.createElement('a');
    const text = document.createTextNode('Hello World!');
    const attr = document.createAttribute('href');
    
    p.nodeType; // 1
    a.nodeType; // 1
    text.nodeType; // 3
    attr.nodeType; // 2

在上面的代码中，我们使用document.createElement()方法创建了两个元素节点p和a，使用document.createTextNode()方法创建了一个文本节点text，使用document.createAttribute()方法创建了一个属性节点attr，通过节点的nodeType属性可以获取到节点的类型。

3. DOM中的属性和方法

DOM中有很多常用的属性和方法，下面列举一些比较常用的属性和方法。

（1）document.getElementById()

document.getElementById()方法根据元素的id属性获取元素节点，如下所示：

获取元素节点


    const element = document.getElementById('myDiv');

（2）element.innerHTML

element.innerHTML属性可用于获取或设置元素的HTML内容，如下所示：

获取和设置HTML内容


    const element = document.getElementById('myDiv');
    
    // 获取HTML内容
    const html = element.innerHTML;
    
    // 设置HTML内容
    element.innerHTML = '<p>Hello World!</p>';

（3）element.setAttribute()

element.setAttribute()方法可用于设置属性节点的值，如下所示：

设置属性节点的值


    const element = document.getElementById('myLink');
    
    element.setAttribute('href', 'http://www.google.com');

（4）element.getAttribute()

element.getAttribute()方法可用于获取属性节点的值，如下所示：

获取属性节点的值


    const element = document.getElementById('myLink');
    
    const href = element.getAttribute('href');

4. DOM事件

DOM事件是指用户与网页交互时发生的各种事件，如点击、滚动、输入等等，在JavaScript中可以使用addEventListener()方法为元素添加事件监听器，如下所示：

添加事件监听器


    const button = document.getElementById('myButton');
    
    button.addEventListener('click', function() {
        alert('Button Clicked');
    });

在上面的代码中，我们使用addEventListener()方法为按钮元素添加了一个点击事件的监听器，在按钮被点击时会弹出一个警告框。

除了click事件外，DOM还有很多其他事件，如mouseover、mouseout、keyup等，可以根据需要选择相应的事件。

5. DOM操作

DOM操作指通过JavaScript对HTML文档进行修改和更新，常用的操作包括添加和删除元素、修改元素的属性和内容等等，如下所示：

（1）添加元素

可以使用appendChild()方法向某个元素中添加子元素，如下所示：

添加元素


    const element = document.getElementById('myDiv');
    const newElement = document.createElement('p');
    
    element.appendChild(newElement);

在上面的代码中，我们使用createElement()方法创建了一个新的P元素newElement，然后使用appendChild()方法将其添加为myDiv元素的子元素。

（2）删除元素

可以使用removeChild()方法从某个元素中删除子元素，如下所示：

删除元素


    const element = document.getElementById('myDiv');
    const childElement = element.children[0];
    
    element.removeChild(childElement);

在上面的代码中，我们使用children属性获取myDiv元素的第一个子元素childElement，并使用removeChild()方法将其从myDiv元素中删除。

（3）修改元素的属性和内容

可以使用setAttribute()方法修改元素的属性值，如下所示：

修改元素的属性值


    const element = document.getElementById('myDiv');
    
    element.setAttribute('class', 'myClass');

在上面的代码中，我们使用setAttribute()方法将myDiv元素的class属性值设置为myClass。

可以使用innerHTML属性修改元素的内容，如下所示：

修改元素的内容


    const element = document.getElementById('myDiv');
    
    element.innerHTML = '<p>Hello World!</p>';

在上面的代码中，我们使用innerHTML属性将myDiv元素的内容设置为一个P标签。

6. 结语

以上就是本文对JavaScript DOM API的知识串讲，DOM是HTML操作中非常重要的一个部分，掌握好DOM的相关知识可以极大地提高网页的开发效率和质量。