DOM操作总结

最新推荐文章于 2023-05-23 10:49:06 发布
最新推荐文章于 2023-05-23 10:49:06 发布
阅读量419 收藏 1
点赞数
分类专栏： js与jQuery 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyp18408251336/article/details/54743976
版权

DOM操作总结

初识DOM

DOM是在ECMAScript基础上添加的提供访问和操作网页内容的方法和接口。可操作HTML中的标签内容、样式、结构。

基本选择器

ID选择器：
    1.getElementById('ID')
    2.直接使用ID名称选择（浏览器会将ID挂在载window对象上，因此在构建页面时，应该少用ID。这种选择方法存在兼容问题）

var box1 = document.getElementById('box');

var box2 = box;
标签选择器：
    1.getElementsByTagName('标签名')
Name选择器：
    1.getElementsByName('Name')
类选择器：
    1.getElementsByClassName('类名')（存在兼容性问题）
综合选择器：
    1.querySelector('CSS选择器')
        选择对应元素的第一个，结果为一个元素。
    2.querySelectorAll('CSS选择器')
        选择对应元素的所有，结果为数组。
综合群组选择器与其他群组选择器的区别：
<body>
        <div id="father">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <script type="text/javascript">
            //通过两种方法选择元素
            var box1 = father.getElementsByTagName('div');
            var box2 = father.querySelectorAll('div');
            console.log('第一次',box1.length);//输出3
            console.log('第一次',box2.length);//输出3

            //添加元素
            var newChild = document.createElement('div');
            newChild.innerHTML = '4';
            father.appendChild(newChild);

            console.log('第二次',box1.length);//输出4
            console.log('第二次',box2.length);//输出3
        </script>
    </body>
被综合群组选择器选出的元素为NodeList集合，而被其他群组选择器选出的为HTMLCollection集合。具体差别见：

http://www.cnblogs.com/summerTea/p/4943533.html

被综合群组选择器选中的元素形成的变量并不会受到其他DOM操作的影响。而被其他群组选择器选中的元素形成的变量会与真实的DOM节点形成引用关系，操作DOM时会同时修改该变量。

基本DOM操作

创建元素
createElement('标签名称')
    创建一个元素到内存。
添加元素
1.父节点.appendChild(元素节点)
    在父节点最后插入新节点。
2.父节点.insertBefore(要插入的节点，已存在的节点)
    在所选节点前插入新节点。
删除元素
父元素.removeChild(元素节点)
    在父元素中删除对应子元素。
替换元素
父元素.replaceChild(新元素，旧元素)
    在父元素中用新元素替换旧元素。
添加内容或元素
元素.innerHtml=''
    在父元素中添加内容或元素。
获取自定义属性值
元素.getAttribute('属性名')
    获取属性值。
修改自定义属性值
元素.setAttribute('属性名',值)
    修改属性值。
泠泉石上
关注
专栏目录
JS基础知识篇-DOM操作总结
weixin_44164982的博客
07-30 700
DOM-Document Object Model 文档对象模型 第一部分：Dom获取元素 第二部分：DOM属性设置与获取 第三部分：事件（鼠标事件、键盘事件、表单事件）
JavaScript中 DOM操作方法小结
01-21
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找，最多找一个； document.getElementsByName() 根据name找，找出的是数组；  document.getElementsByclassName()...
DOM总结
系统运维
08-05 138
DOM总结 跨浏览器开发 市场上的浏览器种类多的不计其数，它们的解释引擎各不相同，期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候，然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；当然，也不能考虑所有的浏览器，我们需要按照客户需求来，如果可以确信浏览网站的用户都使用或大部分使...
原生JS和jQuery操作DOM对比总结
10-20
总结来说，原生JavaScript提供了底层的DOM操作接口，虽然代码量较多，但灵活性高，性能相对较好。而jQuery则通过封装这些接口，提供了更为简洁的API，使得DOM操作更为便捷，但可能会牺牲一些性能。在实际项目中，...
JavaScript DOM节点操作方法总结
11-25
下面就分别从对元素节点的操作和对属性节点的操作来介绍。 元素节点 查 在对DOM进行增删改之前，首先要找到对应的元素。具体的查找方法如下： getElementByID() // 得到单个节点 getElementsByTagName() // 得到...
jQuery基础知识点总结(DOM操作)
11-22
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。在本文中，我们将深入探讨jQuery中的基础DOM操作和动画效果。 **DOM操作** DOM，即Document Object Model，是HTML...
DOM 总结（一）
03-16 135
 DOM 总结（一）      一，概念：      DOM 全称：Document Object Modle （文档目标模板），DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言. ...
JavaScript DOM对于元素节点的操作（增删改查）以及元素节点的样式设置、属性添加
jojoarare的博客
10-22 742
添加/替换元素内容 书写格式 ：元素节点.innerText 书写格式 ：元素节点.innerHTML //替换内容 let divEle = document.querySelector("div"); divEle.innerText = "文本"; //无法识别标签 例如："<span>123</span>" 不会识别span 以字符串加入div divEle.innerHTML = "添加内容" //可以识别标签 可以识别到span //
Dom操作总结
extendworld的博客
12-06 171
noscript标签：在浏览器不支持javascript或者是用户禁用了javascript的时候向用户显示一些内容。以下文章转载自： http://harttle.land/2015/10/01/javascript-dom-api.html 1. DOM 创建DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，
dom总结
ccxCode的博客
10-16 271
遍历节点树 parentNode 父节点（最顶端的parentNode为#document） childNodes 子节点们 firstChild 第一个子节点 lastChild 最后一个子节点 nextSibling 后一个兄弟节点，previousSibling前一个兄弟节点 节点的四个属性 nodeName 元素的标签名、以大写形式表示，只读 nodeV...
Dom节点总结
m0_46176643的博客
05-16 386
1.JavaScript中的DOM对象 例如：document.getElementById("box");//DOM对象 jQuery对象：在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象 $(".box");//jQuery对象 2 DOM对象与jQuery对象的区别 ① DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性 ② jQuery对象是通过jQuery包装DOM对象后产生的...
HTML的DOM操作的总结
hey_uncle的博客
07-26 194
getElementById 默认选择一个； getElementsByClassName和getElementsByTagName等是Elements，所以默认选择多个，即返回一个数组，用其下的元素，要用[0]等； querySelector不区分类，标签名，和ID，用法：querySelector(“abey”)，querySelector(".abey")， querySelector("...
DOM操作汇总
最新发布
妍思码匠的博客
05-23 831
Document Object Model文档对象模型，是w3c指定的标准（所有浏览器的厂商都要按照这个规范实现），专门用来操作网页内容的API。
JavaScript数组与DOM操作总结
"这篇学习笔记主要涵盖了JavaScript中的数组操作、DOM操作和BOM浏览器对象模型的基础知识。通过本文，你可以了解如何使用JavaScript进行数组的增删改查，DOM节点的创建、删除和查找，以及BOM中的一些常用方法，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值