No.26 DOM

一、DOM简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。


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

二、获取元素

1. 根据 ID 获取

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

2. 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');
注意：
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的
如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

3. 通过 HTML5 新增的方法获取

根据类名返回元素对象集合
document.getElementsByClassName('类名');

根据指定选择器返回第一个元素对象
document.querySelector('选择器');

根据指定选择器返回
document.querySelectorAll('选择器');

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

4. 获取特殊元素（body，html）

返回body元素对象
doucument.body

返回html元素对象
document.documentElement

三、操作元素

1. 改变元素内容

element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉

element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

2. 常用元素的属性操作

  1. innerText、innerHTML 改变元素内容
  2. src、href
  3. id、alt、title

3. 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：
type、value、checked、selected、disabled

4. 样式属性操作

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

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

注意：

  1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
  2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
  3. 如果样式修改较多，可以采取操作类名方式更改元素样式
  4. class因为是个保留字，因此使用className来操作元素类名属性
  5. className 会直接更改元素的类名，会覆盖原先的类名

5. classList 属性

classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加，移除及切换 CSS 类。

添加类：
element.classList.add(’类名’);
focus.classList.add(‘current’);

移除类：
element.classList.remove(’类名’);
focus.classList.remove(‘current’);

切换类：
element.classList.toggle(’类名’);
focus.classList.toggle(‘current’);

注意以上方法里面，所有类名都不带点

6. 排他思想

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

  1. 所有元素全部清除样式（干掉其他人）
  2. 给当前元素设置样式 （留下我自己）
  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

7. 自定义属性的操作

  1. 获取属性值
    element.属性 获取属性值。
    element.getAttribute('属性');
    区别：
    element.属性 获取内置属性值（元素本身自带的属性）
    element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性
  2. 设置属性值
    element.属性 = ‘值’ 设置内置属性值。
    element.setAttribute('属性', '值');
    区别：
    element.属性 设置内置属性值
    element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）
  3. 移除属性
    element.removeAttribute('属性');

8. H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute('属性') 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：

  1. 设置H5自定义属性
    H5规定自定义属性data-开头做为属性名并且赋值。
    比如 <div data-index=“1”></div>
    或者使用 JS 设置
    element.setAttribute(‘data-index’, 2)
  2. 获取H5自定义属性
    兼容性获取 element.getAttribute('data-index');
    H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

四、节点操作

1. 获取元素通常使用两种方式

  1. 利用 DOM 提供的方法获取元素
    document.getElementById()
    document.getElementsByTagName()
    document.querySelector 等
    逻辑性不强、繁琐
  2. 利用节点层级关系获取元素
    利用父子兄节点关系获取元素
    逻辑性强， 但是兼容性稍差

2. 节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

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

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
注释节点 nodeType 为 8
我们在实际开发中，节点操作主要操作的是元素节点

3. 节点层级

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

  1. 父级节点

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

  1. 子节点

①parentNode.childNodes（标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes

var ul = document. querySelector('ul');
for(var i = 0; i < ul.childNodes.length;i++) {
    if (ul.childNodes[i].nodeType == 1) {    // ul.childNodes[i] 是元素节点
        console.log(ul.childNodes[i]);
    }
}



②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]

  1. 兄弟节点

node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
注意：这两个方法有兼容性问题， IE9 以上才支持。

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

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

4. 节点创建

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

5. 节点添加

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

6. 节点删除

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

阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<a href='javascript:;'>删除</a>
？？？什么都不写也可以啊，留一个疑问？？？

2020年2月1日疑问解除：
如果什么都不写，a标签作为一个按钮进行事件响应时，可能不会响应完全，切割轮播图的坑。

<a href="javascript:;" class="next">&gt;</a>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var flag = true;
        $(".next").on("click", function () {
            if (flag == true) {
                flag = false;
                index--;
                $("li").each(function (key) {
                    $(this).css({
                        "transform": "rotateX(" + (index * 90) + "deg)",
                        "transition-delay": (key * 0.2) + "s"
                    });
                });
                setTimeout(function () {
                    flag = true;
                }, 1000);
            }
        });
    });
</script>

完整代码见代码附录。

7. 节点复制（节点克隆）

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

注意：

  1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
  2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

8. 三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()

区别：

  1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
  2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
  3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
  4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
    总结：不同浏览器下，innerHTML 效率要比 creatElement 高

五、DOM 总结

关于dom操作，主要针对于元素对象的操作。
主要有创建、增、删、改、查、属性操作。

1. 创建

  • document.write
  • innerHTML
  • createElement

2. 增

  • appendChild
  • insertBefore

3. 删

  • removeChild

4. 改

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

  • 修改元素属性： src、href、title等
  • 修改普通元素内容： innerHTML 、innerText
  • 修改表单元素： value、type、disabled等
  • 修改元素样式： style、className

5. 查

主要获取查询dom的元素

  • DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
  • H5提供的新方法： querySelector、querySelectorAll 提倡
  • 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

6. 属性操作

主要针对于自定义属性

  • setAttribute：设置dom的属性值
  • getAttribute：得到dom的属性值
  • removeAttribute移除属性

代码附录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切割轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #000000;
        }

        .view {
            width: 560px;
            height: 300px;
            margin: 100px auto;
            position: relative;

        }

        ul {
            width: 100%;
            height: 100%;
            list-style: none;
            transform: rotate3d(0, 0, 0, 0deg);

            transform-style: preserve-3d;
        }

        ul > li {
            width: 20%;
            height: 100%;
            float: left;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }

        ul > li > span {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul > li > span:nth-of-type(1) {
            background: url("images/q1.jpg");
            transform: translateZ(150px);
        }

        ul > li > span:nth-of-type(2) {
            background: url("images/q2.jpg");
            transform: translateY(-150px) rotateX(90deg);
        }

        ul > li > span:nth-of-type(3) {
            background: url("images/q3.jpg");
            transform: translateZ(-150px) rotateX(180deg);
        }

        ul > li > span:nth-of-type(4) {
            background: url("images/q4.jpg");
            transform: translateY(150px) rotateX(-90deg);
        }

        ul > li:nth-of-type(2) > span {
            background-position: -100% 0;
        }

        ul > li:nth-of-type(3) > span {
            background-position: -200% 0;
        }

        ul > li:nth-of-type(4) > span {
            background-position: -300% 0;
        }

        ul > li:nth-of-type(5) > span {
            background-position: -400% 0;
        }

        .pre, .next {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            position: absolute;
            top: 50%;
            text-decoration: none;
            font-size: 40px;
            transform: translate(0, -50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
        }

        .pre {
            left: 0;
        }

        .next {
            right: 0;
        }
    </style>
</head>
<body>
<div class="view">

    <ul>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>

    <a href="javascript:;" class="pre">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
</div>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var flag = true;
        $(".next").on("click", function () {
            if (flag == true) {
                flag = false;
                index--;
                $("li").each(function (key) {
                    $(this).css({
                        "transform": "rotateX(" + (index * 90) + "deg)",
                        "transition-delay": (key * 0.2) + "s"
                    });

                });
                setTimeout(function () {
                    flag = true;
                }, 1000);
            }

        });

        $(".pre").on("click", function () {
            if (flag == true) {
                flag = false;
                index++;
                $("li").each(function (key) {
                    $(this).css({
                        "transform": "rotateX(" + index * 90 + "deg",
                        "transition-delay": key * 0.2 + "s"
                    });

                });
                setTimeout(function () {
                    flag = true;
                }, 1000);
            }

        });

    });
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,163评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,301评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,089评论 0赞 352
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,093评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,110评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,079评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,005评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,840评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,278评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,394评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,980评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2赞 352