DOM简单梳理

最新推荐文章于 2021-12-28 17:57:28 发布
最新推荐文章于 2021-12-28 17:57:28 发布
阅读量389 收藏
点赞数
分类专栏： Javascript 文章标签： html dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X_Jagger/article/details/62889669
版权

定义：DOM：Document Object Model。
是针对HTML,XML文档的一个API（应用程序编程接口），它将任何HTML,XML文档描绘成一个由多层节点(node)构成的结构。
节点有多种类型，每种类型表示文档中不同的信息及标记，每个节点也拥有各自的特点、数据和方法，然后各节点之间也存在某种关系。
想象成一个树状图

一、Node节点爸爸

一共有12种节点，这些节点都继承自一个基类型Node。
1.基本属性方法：
nodeName
nodeValue
nodeType
childNodes:一个保存子元素的Nodelist
parentNodes
nextSibling - previousSibling
2.操作节点方法
appendChild()
insertBefore(node1,node2)
replaceChild(node1,node2)
removeChild(nodex)移除某个节点
cloneNode(true or false) : true表示深复制（整个子节点树），false表示浅复制(本身)

二、常用节点Document类型
JS通过Document类型表示文档，在浏览器中，document对象是继承自Document的HTMLDocument的一个实例，表示整个HTML页面。

1.方法
dcument.documentElement :取得对<html>的引用
dcument.body
dcument.doctype（注释在不同的浏览器结果不同）
dcument.title
dcument.URL/domain/referrer（修改成同一个domain可以实现跨访问）
dcument.getElementById() （大小写匹配，返回第一个符合的对象，name不要设置和ID一样，IE很多不一样）
dcument.getElementSByTagName() （返回HTMLCollection, 比如“img”,”*”表示取得所有元素）
document.write/open/close/writeln/
特殊集合: 都是HTMLCollection对象
document.anchors ：带name特性的<a>
document.forms
document.images
document.links 带href的<a>

2.一致性检查
由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了哪些部分十分必要。

三、Element元素
作用：用于变现HTML,XML元素，提供了对元素标签名、子节点、特性的访问。
1.HTML元素
标准特性：id,title,lang,dir,className

2.对特性的操作(特性部分大小写）

getAttribute()
setAttribute()
removeAttribute()

3.attributes属性
它也包含一个NamedNodeMap,动态集合
element.attributes[“id”]

注：除IE外，不能用属性的形式添加特性到DOM对象中。
一般用对象的属性来取得特性，只有取得自定义特性值时，才会使用getAttribute().
DOM操作中，<script> <style> 小心点
DOM消耗开销很大，NodeList问题最多。尽量减少DOM操作

X_Jagger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端知识点梳理
日常笔记/总结/系列知识梳理
08-15 2139
Vue.js 的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。Vue.js 的设计从底向上逐步增量开发，其核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。
Vue源码解析(一)，Vue中DOM的挂载过程
qq_36297981的博客
05-05 3306
1.从入口开始 new Vue()做了什么 从入口文件开始，我们来分析一下new Vue()做了哪些工作，Vue实际上是一个类，我们通过new Vue() 来创建一个Vue实例。现在来看一下源码，在src/core/instance/index.js function Vue (options) { // 判断是否通过new 创建Vue实例 if (process.env.NODE_ENV...
2020-04-26
ojzct的博客
04-26 248
千里之行，始于足下！
jQuery文档对象模型DOM的实际应用
祈澈菇凉
11-28 434
DOM 在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。 在 jQuery 中，已经将最常用的 DOM 操 作方法进行了有效封装，并且不需要考虑浏览器的兼容性，对...
javascript学习笔记——DOM、Node类型、Document类型、Element类型、Text类型、Comment类型（注释）
ass_ace
08-04 2669
DOM（文档对象类型）是针对HTML和XML文档的一个API。 DOM可以将任何HTML和XML文档秒回成一个由多层次节点构成的结构； 节点分为12种类型，每种类型表示文档中不同的信息及标记；每个节点都拥有各自的特点、数据和方法 文档节点是每个文档的根节点；文档节点只有一个子节点叫文档元素，即，&lt;html&gt;元素。 文档元素是文档最外层的元素，文档中的其他所有元素都包含在文档元...
前端学记之DOM-属性操作
victor_wk的博客
01-11 228
属性访问器 var p = document.createElement("li"); p.innerText = "TextInner"; p.value = "textInner"; 操作的是实用对象 设置获取属性 p.setAttribute("value","textInner"); var va = p.getAttribute("value"); 仅仅是字符串的操作
虚拟dom和直接操作dom_DOM操作入门指南
weixin_26738395的博客
08-26 903
虚拟dom和直接操作domDOM Manipulation can make web applications customizable and the data of the webpage can be updated without refreshing the page. By DOM manipulation we can add, change and remove any HTML ...
DOM简单笔记
weixin_44736637的博客
12-28 476
DOM 一：概述 DOM（Document Object Model）文档对象类型 他是W3C为HTML文档提供的一个API（应用程序接口） 二：DOM节点（node） 常用的节点有：元素节点 文本节点 属性节点 还有注释节点 节点属性 节点类型 node name node type node value 元素节点 标签名（大写） 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 获取属性节点：ele.getAttributeNode（‘’id‘’
基础知识 | DOM
A123ppleQueen的博客
02-01 1947
DOM ：Document Object Model 专门操作网页内容的一套现成的对象和函数的集合
关于JS DOM中侦听事件获取的各种坐标简单梳理
Tianyu5177
07-31 1869
简单梳理一下DOM中的各种宽、高。首先我们给全局DOM加一个鼠标点击监听事件，用于监听我们要观察的宽高，代码如下： window.addEventListener("mousedown",demo); function demo(e){ e=e || window.event; console.log("我们观察的宽高值"); } 1.e.x ...
leetcode下载-DOM-Diff:DOM-Diff
06-29
仓库，文章内容按照一位老师视频学习而来（详情见文本末尾哈），每一个字都是自己手动敲出来的，算是给自己的一个梳理和总结，下面，我们一起来学习一下 dom diff 吧。 DOM Diff dom diff 其实就是对比两个虚拟节点...
深度解析dom diff算法（二）
weixin_39327883的博客
10-26 517
了解了vdom和dom diff的前世今生，让我们来看看当今主流前端框架的diff算法策略又是什么，本篇我们先介绍react的dom diff算法 React算法时间复杂度 众所周知，react框架把diff算法复杂度由O（n的三次）降低到了O（n） React对diff算法的改进 react的diff算法针对三个纬度产出了相应的优化策略： 1、web ui中跨层级的移动操作很少，可以忽略不计 （tree diff） 2、拥有相同类型的两个组件将会生成相似的树形结构，不同类型的组件生成不同的树形结.
一篇文章搞懂toString() 和 valueOf()
热门推荐
X_Jagger的博客
06-18 1万+
碰到过几次这两个的问题了，于是总结一下，通过几个例子来学学toString() 和 valueOf() 以及他们之间的区别 目录： 零、隐式转换 一、认识toString 二、认识valueOf() 三、toString() vs valueOf 零、隐式转换Point to: 有趣的JS隐式转换一、认识toStringMDN：toString() 方法返回一个表示该对
JS 二进制计算，如何得到一个负数的二进制表示
X_Jagger的博客
05-26 7279
题目：输入一个整数，输出该数二进制表示中1的个数。其中负数用补码表示 收获： 1.由负数的补码求他的绝对值补码：负二进制数的绝对值，只要各位（包括符号位）取反，再加1，就得到其绝对值。 2.负数正码取反（不包括符号位）+1即得到补码表示 3.JS中求二进制，(number).toString(2)，负数和正数表示除了符号外相同。如(-123).toString(2) ==
数组，对象遍历以及特殊的数组里的对象处理
X_Jagger的博客
05-20 2681
做题碰到了数组里的对象的问题，特记下 一、简单遍历//数组 var x = [1,2]; for(var i = 0; i < arr.length; i++ ){ //处理 console.log(arr[i]);//输出1 2 }//对象 var x = {a:1,b:2}; for(var i in x){ //处理 console.log(i);//输出 a
String.slice() 和 String.substring(),String.substr()的区别
X_Jagger的博客
05-26 2388
Syntax: string.slice(start, stop); Syntax: string.substring(start, stop); 返回一个字符串，左包含，右不包含 相同： 1.如果start == stop,return一个空字符串 2.stop如果被省略，则直接扫至字符串尾 3.如果start或stop大于了字符串长度，则会被替换成字符串长度 不同： substin
问题（已解决）：push pop for循环中push变量，变量随之改变的问题
X_Jagger的博客
06-10 2203
今天做剑指Offer的时候碰到了这个问题，push一个数组，这个数组也在pop元素，为什么push没有直接把结果放进去，而放的一个指向var x = []; var y = [1,2,3]; for(var i = 0; i < 5; i++) { x.push(y); y.pop(); } console.log(x); /*结果是这个[Array(0), Array(0), Ar
setTimeout 循环闭包的经典面试题 解法与探究
X_Jagger的博客
03-21 715
题:修改下面的代码，让循环输出的结果依次为1， 2， 3， 4， 5 for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log(i); }, i*1000 ); } 一、利用闭包:1.匿名函数 for (var i=1; i<=5; i++) { (
You Don't Know JS: Types & Grammar 总结
X_Jagger的博客
08-23 623
Typesnull undefined boolean number string object symbol(es6) 除了object，都叫基本类型用typeof来检测types： typeof NaN === 'number //true typeof Infinity === 'number' //true typeof undefned ==='undefined' typeof nul
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值