DOM总结

最新推荐文章于 2022-11-01 17:55:57 发布
最新推荐文章于 2022-11-01 17:55:57 发布
阅读量297 收藏 1
点赞数
分类专栏： DOM 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43513170/article/details/105762220
版权

前言
DOM总结笔记篇仅是记载本人学习过程中的一些总结，为了梳理一下知识点，督促自己不断加强学习。文中有些是源自官网，有些是搜集资料，有些是个人观点，难免存在某些知识点疏漏或者是有错误的地方，如果错误之处，希望看到的小伙伴能及时提个醒，避免误导其他小伙伴，也希望我的总结能帮助到正在学或者是将要学习DOM的小伙伴们！大家一起努力，早日成为IT界的大神！

DOM

一、DOM

1.DOM（Document Object Model）
2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象集合。也有人称DOM是对HTML以及XML的标准编程接口。

XML-XHTML-HTML

XML可自定义标签
 <student>
    <name>ahh</name>
</student>

 
        //创建一个div
        var div = document.createElement('div');
        document.body.appendChild(div);
        


        // 切换div的颜色
        var div = document.getElementsByTagName('div')[0];
        div.style.backgroundColor = 'red';

        var count = 0;
        div.onclick = function () {
            count ++;
            if (count % 2 == 1) {
                this.style.backgroundColor = 'red';
                console.log(count);
            } else {
                this.style.backgroundColor = 'green';
                console.log(count);
            }
        }
        


    <!-- 选项卡功能 -->
    <div class="wrapper">
        <button class="active">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div style="display:block" class="content">
            我是内容一
        </div>
        <div class="content">
            我是内容二
        </div>
        <div class="content">
            我是内容三
        </div>
    </div>

    <script>
        var btn = document.getElementsByTagName("button");
        var div = document.getElementsByClassName("content");

        for (var i = 0; i < btn.length; i++) {
            (function (n) {
                btn[n].onclick = function () {
                for (var j = 0; j < btn.length; j++) {
                    btn[j].className = "";
                    div[j].style.display = "none";
                }
                this.className = "active";
                div[n].style.display = "block";
            }
            }(i))
        }
      


        // 利用定时器控制小方块运动
        var div = document.createElement("div");
        document.body.appendChild(div);

        div.style.width = "200px";
        div.style.height = "200px";
        div.style.background = "red";
        div.style.position = "absolute";
        div.style.top = 0;
        div.style.left = 0;

        setInterval(function () {
            div.style.left = parseInt(div.style.left) + 1 + "px";
            div.style.top = parseInt(div.style.top) + 1 + "px";
        }, 100)

二、DOM基本操作

（一）节点
1.遍历节点树
（1）parentNode -> 父节点 （最顶端的parentNode为#document）
（2）childNodes -> 子节点们
（3）firstChild -> 第一个子节点
（4）lastChild -> 最后一个子节点
（5）nextSibling -> 后一个兄弟节点 previousSibling -> 前一个兄弟节点
2.基于元素节点树的遍历
（1）parentElement -> 返回当前元素的父元素节点（IE不兼容）
（2）children -> 只返回当前元素的元素子节点
（3）node.childElementCount === node.children.length 当前元素节点的子元素
（4）firstElementChild -> 返回的是第一个元素节点（IE9及IE9以下不兼容）
（5）.lastElementChild -> 返回的是最后一个元素节点（IE不兼容）
（6）nextElementSibling / previousElementSibling -> 返回后一个/前一个兄弟元素
3.节点的四个属性
（1）nodeName：元素的标签名，以大写形式表示，只读。
（2）nodeValue：Text节点或Comment节点的文本内容，可写。
（3）nodeType：该节点的类型，只读。
（4）attributes：Element节点的属性集合。
4.节点的一个方法
（1）Node.hasChildNodes();
5.节点的类型
（1）元素节点 - 1
（2）属性节点 - 2
（3）文本节点 - 3
（4）注释节点 - 8
（5）document - 9
（6）DocumentFragment - 11

（二）

1.增加
（1）document.createElement();
（2）document.createTextNode();
（3）document.createComment();
（4）document.createDocumentFragment();
2.插入
（1）parentNode.appendChild();
（2）parentNode.insertBefore(a, b); //insert a before b
3.查看
（1）documentj代表整个文档
（2）getElementById（）； //元素id在ie8以下的浏览器，不区分id大小写，而且返回匹配内容的元素
（3）getElementsByTagName（）； //标签名
（4）getElementsByClassName（）；//类名 ie8和ie8以下的ie版本中没有，可以多个class一起
（5）getElementsByName（）； //需注意，只有部分标签name可生效（表单、表单元素、img、iframe）
（6）querySelector(); //可添加css选择器，但在ie和ie7以下的版本中没有，不实时。
（7）querySelectorAll（）； //可添加css选择器，选出来的是一组，但在ie和ie7以下的版本中没有，静态的（保存的是父本）。
4.删除
（1）parent.removeChild();
（2）child.remove();
5.替换
（1）parent.replaceChild(new, origin);

（三）

1.Element节点的一些属性
（1）innerHTML
（2）innerText(火狐不兼容）/ textContent（老版本IE不好使）
2.Element节点的一些方法
（1）ele.setAttribute()
（2）ele.getAttribute()

Test:

1.遍历元素节点树（在原型链上编程）
        
        // 遍历节点树，在原型链上编程
        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[0];

        HTMLElement.prototype.myTree = function (ele) {
            var arr = [];
            for (var i = 0; i < this.childNodes.length; i++) {
                arr.push(this.childNodes[i]);
            }
            return arr;
        }
2.封装函数，返回元素e的第n层祖先元素节点
        
        // 封装函数，返回元素e的第n层祖先元素节点
        function retBytes (ele, n) {
            while (ele && n) {
                ele = ele.parentElement;
                n --;
            }
            return ele;
        }
3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。
        // 不考虑IE9及IE9以下兼容
        function myRet (ele, n) {
            while (ele && n) {
                if (n > 0) {
                    ele = ele.nextElementSibling;
                    n --;
                } else if (n < 0) {
                    ele = ele.previousElementSibling;
                    n ++;
                }
            }
            return ele;
        }
        


        // 考虑IE兼容
        function myRet (e, n) {
            while (e && n) {
                if (n > 0) {
                    if (0 && e.nextElementSibling) {
                        e = e.nextElementSibling;
                    } else {
                        for (e.nextSibling; e && e.nodeType != 1; e.nextSibling);
                    }
                } else {
                    if (e.previousElementSibling) {
                        e = e.previousElementSibling;
                    } else {
                        for (e.previousSibling; e && e.nodeType != 1; e.previousSibling);
                    }
                }
            }
            return e;
        }
4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。
        // 编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。
        // children -> 只返回当前元素的元素子节点
        Element.prototype.myChild = function () {
            var child = this.childNodes,
                len = childNodes.length,
                arr = [];
            
            for (var i = 0; i < len; i++) {
                if (child[i].nodeType == 1) {
                    arr.push(child[i]);
                }
            }
            return arr;
        }
5.自己封装hasChildren（）方法，不可用children属性。
        // children -> 只返回当前元素的元素子节点
        Element.prototype.myChild = function () {
            var child = this.childNodes,
                len = childNodes.length,
                arr = [];
            
            for (var i = 0; i < len; i++) {
                if (child[i].nodeType == 1) {
                    return true;
                }
            }
            return false;
        }
6.封装函数insertAfter(),功能类似insertBefore();
        // 封装函数insertAfter(),功能类似insertBefore();
        Element.prototype.insertAfter = function (targetNode, originNode) {
            var beforeNode = originNode.nextElementSibling;
            if (beforeNode == null) {
                this.appendChild(targetNode);
            } else {
                this.insertBefore(targetNode, beforeNode);
            }
        }

        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[0];
        var i = document.createElement('i');
7.// 将目标节点内部的顺序逆序
8.
        // 定时器，三分钟停止
        var minutesNode = document.getElementsByTagName('input')[0];
        var secondsNode = document.getElementsByTagName('input')[1];

        var minutes = 0,
            seconds = 0;

        var timer = setInterval(function () {
            seconds ++;
            if (seconds == 60) {
                seconds = 0;
                minutes ++;
            }

            secondsNode.value = seconds;
            minutesNode.value = minutes;

            if (minutes == 3) {
                clearInterval(timer);
            }
        }, 100)

文章持续更新中加粗样式，敬请关注，谢谢阅读！

初识DOM DOM总结 心得
qq_47761388的博客
08-01 1139
什么是DOM？ DOM：Document Object Model，文档对象模型。 是一组用来描述js代码怎样与html文档进行交互和访问的web标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式和行为。 DOM中有哪些节点类型？ 元素节点 属性节点 文本节点 DOM1 标准方法 getElementById() 因为id在html标签中是唯一，所以我们通过id获取到的元素也是唯一； 这种方法：效率，准确率都很高；不能批量选择元素； getElementsBy
JavaScript(四)：JavaScript版的DOM总结
01-08
DOM的核心在于将文档分解为一个个节点，这些节点包括元素节点、文本节点、属性节点等，形成了一个树状结构，称为DOM树。 1、DOM结构 DOM树是由各种类型的节点构成的，例如元素节点（如`<div>`）、文本节点（包含...
JavaScriptDOM总结（有序整理）史上最全最详细（建议收藏）
编程教培一线讲师
04-09 1116
在学习JavaScript时,DOM和BOM都是重点内容 在学习加复习的情况下 理解了浅层内容 下面是展示 一：DOM简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。  文档：一个页面就是一个文档，DOM 中使用 document 表示  元素：页面中的所有标签都是元素，DOM 中使用 ele.
DOM总结（思维导图）
m0_74331160的博客
11-01 142
DOM总结（思维导图）
JavaScript之DOM总结
Victor
06-14 1347
DOM （Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口），是一个能够让程序和脚本动态访问并且更新文档内容、结构及样式语言平台 。D（document），是web加载的网页文档；O（Object），我们熟知的对象，可以调用属性和方法；而M（Model）理解为网页文档的结构。       主要内容概括如下：         
js中DOM总结
qq_45378970的博客
09-30 2048
DOM总结DOM概念查找元素文档结构和遍历节点操作DOM高级 DOM概念 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 DOM是“Document Object Model”（文档对象模型）的首字母缩写。 dom节点类型 元素类型 节点类型 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 节点属性 1.nodeName 定义和用法:nodeName
JavaScript：Dom知识点总结
果冻
07-21 1424
目录 一、DOM简介 二、HTML DOM 树形结构: 三、DOM 节点 节点类型 节点父、子和同胞 （1） 父级节点 （2）子节点childNodes （3）子节点children （4）子节点first和last （5）兄弟节点 四、DOM对象 1、查找 HTML 元素常用方法 （1）get方法 （2）querySelector 和 querySelectorAll （3）获取特殊元素（body，html） 2、事件基础 （1）事件概述 （2）事件三要素 ​（.
DOM（总结）
ksx2333的博客
03-29 1759
文章目录1 初识DOM2 获取DOM元素3 操作属性节点4 操作class属性5 操作文本节点 1 初识DOM DOM: Document Object Model 文档对象模型 文档：html文档。 对象：DOM元素对象 html元素对象 模型：树模型 html标签就形成一课树 DOM中有一套操作页面元素的属性和方法。 <div class="box">我是一个div</div>
dom总结
tianxin1122的专栏
02-28 915
2012-02-27 19:40 4人阅读 评论(0) 收藏 举报 一.dom 的定义 document object model （文档对象模型） dom可以将标记型（hrml xml）文档转换成对象 可以将标记型文档的每一个标记档转换成对象 将文档或者是标记封装成对象后，对象可以有更多的属性和方法操作文 二、 BOM的概念 BOM browser object
DOM属性总结
qq_59721336的博客
10-11 3203
firstChild 第一个子节点 （文本节点+元素节点）firstElementChild 第一个子元素节点lastChild 最后一个子节点 （文本节点+元素节点）lastElementChild 最后一个子元素节点1.获取元素的属性值1) // element.属性;获取内置属性(元素本身自带的属性)2) // element.getAttribute('属性');主要获得自定义的属性(标准),程序员自定义的属性2.设置元素的属性值1) // element.属性='值';
Javascript基础知识（三）BOM，DOM总结
10-25
BOM和DOM是JavaScript中两个非常重要的概念，它们是实现网页动态交互的核心技术。BOM（Browser Object Model）指的是浏览器对象模型，它允许开发者通过JavaScript操作浏览器窗口、导航历史、定时器等浏览器自身功能...
Javascript入门学习第九篇 Javascript DOM 总结第1/2页
12-08
1， 创建节点。 createElement(): var a = document.createElement(“p”); 它创建的是一个元素节点，所以 nodeType 等于 1 。 a.nodeName 将返回 p ; 注意；createElement()方法创建出来的新元素节点...
JavaSript DOM总结笔记.rar
03-01
在本篇总结笔记中，我们将深入探讨JavaScript与DOM的互动，包括查找、修改和添加网页元素。 1. **DOM基本概念** - DOM树：HTML文档被解析后形成一棵节点树，每个节点代表文档的一部分。 - 元素节点：HTML标签对应...
pytz-2022.6-py2.py3-none-any.whl
最新发布
11-03
pytz库的主要功能 时区转换：pytz库允许用户将时间从一个时区转换到另一个时区，这对于处理跨国业务或需要处理多地时间的数据分析尤为重要。 历史时区数据支持：pytz库不仅提供了当前的时区数据，还包含了历史上不同时期的时区信息，这使得它在处理历史数据时具有无与伦比的优势。 夏令时处理：pytz库能够自动处理夏令时的变化，当获取某个时区的时间时，它会自动考虑是否处于夏令时期间。 与datetime模块集成：pytz库可以与Python标准库中的datetime模块一起使用，以确保在涉及不同时区的场景中时间的准确性。
VB程序实例-禁用IE[查看]菜单下[工具栏]中的子菜单.zip
11-03
VB程序实例，可供参考学习使用，希望对你有所帮助
技术资料分享ZigBee-Specification（2007）非常好的技术资料.zip
11-03
技术资料分享ZigBee-Specification（2007）非常好的技术资料.zip
VB程序实例-房态状态管理.zip
11-03
VB程序实例，可供参考学习使用，希望对你有所帮助
VB程序实例82_Foleder操作_建立删除文件.zip
11-03
VB程序实例，可供参考学习使用，希望对你有所帮助
JavaScript DOM操作与事件总结
"对DOM操作的要点总结，包括JavaScript中的转换函数、事件处理、定时器以及DOM元素的操作等关键知识点。" 在Web开发中，DOM（Document Object Model）是HTML和XML文档的一种结构化表示，它允许程序员通过JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值