首页 > 其他分享> 文章详细

Web API——DOM

2020-06-13 22:09:27 阅读：261 来源： 互联网

标签：Web 知否 DOM 元素 element API 节点属性

 DOM 简介  获取元素  事件基础  操作元素  节点操作

1. DOM 简介

1.1 什么是 DOM

文档对象模型(Document Object Model，简称 DOM)，是 W3C 组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2 DOM 树

文档 : 一个页面就是一个文档，DOM 中使用 document 表示
元素 : 页面中的所有标签都是元素，DOM 中使用 element 表示
节点 : 网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM 中使用 node 表示 DOM 把以上内容都看做是对象

2. 获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢? 获取页面中的元素可以使用以下几种方式:

根据ID获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

注意：

element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
注意id是字符串，需要用引号包裹起来

2.3 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

注意:
1. 因为得到的是一个对象的集合，以伪数组的形式存储，所以我们想要操作里面的元素就需要遍历。

2. 得到元素对象是动态的
3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

还可以获取某个元素(父元素)内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意:父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

    <ul>
        <li>知否知否应是绿肥红瘦1</li>
        <li>知否知否应是绿肥红瘦2</li>
        <li>知否知否应是绿肥红瘦3</li>
        <li>知否知否应是绿肥红瘦4</li>
        <li>知否知否应是绿肥红瘦5</li>
    </ul>
    <ul id="nav">
        <li>知否知否应是绿肥红瘦hhhh</li>
        <li>知否知否应是绿肥红瘦hhhh</li>
        <li>知否知否应是绿肥红瘦hhhh</li>
        <li>知否知否应是绿肥红瘦hhhhhhhh</li>
        <li>知否知否应是绿肥红瘦hhhh</li>
    </ul>
<script>
var nav = document.getElementById('nav');
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>

2.4 通过 HTML5 新增的方法获取

html5只有ie9以上才兼容

1. document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回

注意:

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

3. 事件基础

3.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解: 触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.2 事件三要素

1. 事件源 (谁)

事件被触发的对象，比如：按钮
2. 事件类型 (什么事件)

触发什么事件：比如鼠标点击，鼠标经过，键盘按下

3. 事件处理程序 (做啥)

通过匿名函数赋值的方式完成

3.3 执行事件的步骤

1. 获取事件源
2. 注册事件(绑定事件)
3. 添加事件处理程序(采取函数赋值形式)

4. 操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

4.1 改变元素内容

innerText只获得纯内容，innerHTML可以获得包括HTML标签在内的所有内容

4.2 常用元素的属性操作

2. src、href
3. id、alt、title

img.src='images/zxy/jpg';
img.title='张学友';

4.3 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性:

type、value、checked、selected、disabled

要想修改表单元素的内容，不能使用innerHTML，需要使用value属性

4.4 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1. element.style 行内样式操作 
2. element.className 类名样式操作

（1）element.style 注意:
1.JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor 2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

表单的两个事件：onfocus、onblur

(2) element.className 注意:
1. 如果样式修改较多，可以采取操作类名方式更改元素样式。
2. class因为是个保留字，因此使用className来操作元素类名属性 3. className 会直接更改元素的类名，会覆盖原先的类名,原先的类名就没有了。

//点击之后换成另外一个css样式，比如新的样式叫做change
this.className = 'change';

如果想保留原先的类名，可以这样写：

this.className = 'first change';

4.5 排他思想（算法）

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1.获取所有按钮
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // 先把所有的按钮背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // 然后把当前按钮颜色变为粉色
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

4.6 自定义属性的操作

1. 获取属性值

element.属性 获取属性值。
element.getAttribute('属性');

区别:

 element.属性获取内置属性值(元素本身自带的属性)
 element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性

2. 设置属性值

element.属性 = ‘值’ 设置内置属性值。
element.setAttribute('属性', '值');

区别:

 element.属性设置内置属性值
 element.setAttribute(‘属性’);主要设置自定义的属性 (标准)

3. 移除属性

element.removeAttribute('属性');

4.7 H5自定义属性

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性:

1. 设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

比如 <div data-index=“1”></div>

或者使用 JS 设置

element.setAttribute(‘data-index’, 2)

2. 获取H5自定义属性

1. 兼容性获取 element.getAttribute(‘data-index’);
2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie11才开始支持

element.dataset.index 
element.dataset[‘index’]

dataset是一个集合里面存放了所有以data开头的自定义属性，后面直接写index不用写data-index

    <div data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 兼容性获取自定义属性
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));

        // 2. h5新增的获取自定义属性,只能获取data-开头的属性
        console.log(div.dataset.index);
        // 直接使用index即可
        console.log(div.dataset['index']);
        // 如果有多个-链接的单词，我们获取的时候采用驼峰命名法
        console.log(div.dataset['listName']);
        console.log(div.dataset.listName);
    </script>

5. 节点操作

5.1 为什么学节点操作

5.2 节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素(节点)均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)

我们在实际开发中，节点操作主要操作的是元素节点

5.3 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1. 父级节点

node.parentNode

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

2. 子节点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意:返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

parentNode.children(非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 (这个是我们重点掌握的)。

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null。

parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null。

注意:这两个方法有兼容性问题，IE9 以上才支持。

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

解决方案:

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

3. 兄弟节点

1. node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点（包括元素、属性、文字节点），找不到则返回null。同样，也是包含所有的节点。

2. node.previousSibling

previousSibling 返回当前元素上一个兄弟节点（包括元素、属性、文字节点），找不到则返回null。同样，也是包含所有的节点。

3. node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

4. node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null

注意:这两个方法有兼容性问题， IE9 以上才支持。

问:如何解决兼容性问题 ?

答:自己封装一个兼容性的函数

function getNextElementSibling(element) { 
    var el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) { 
            return el;
         } 
    }
    return null; 
}

5.4 创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

1. node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS 里面的 after 伪元素。

2. node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建元素节点
        var li = document.createElement('li');
        // 2. 添加节点 
        var ul = document.querySelector('ul');
        ul.appendChild(li); // 末尾追加
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]); // 指定元素的前面添加
    </script>

页面添加一个新的元素：

创建元素
添加元素

5.5 删除节点

node.removeChild(child)

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

5.6 复制节点(克隆节点)

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

标签：Web,知否,DOM,元素,element,API,节点,属性
来源： https://www.cnblogs.com/ccv2/p/13062434.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9