《JavaScript DOM编程艺术》 读书笔记

一句话解释DOM: DOM,即我们所看到的网页,其在浏览器背后的文档结构(树状分支结构),涵盖了每一个节点(称之为对象)。可以通过JS等语言去操控改变每一个节点,达到我们想要呈现的效果。

DOM实际上是以面向对象方式描述的文档模型。

DOM是对象,JS是语言,语言可以操作对象

DOM 是HTML文档结构,其实就是为了能让JS操作html元素而制定的一个规范,dom 的根本就是 document 对象,改对象有很多属性和方法,例如创建节点、复制节点、移除节点、修改属性等。

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API)。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM对象,即是我们用传统的方法(javascript)获得的对象。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,

文档对象模型,把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点,包括JS在内的任何语言都可以通过DOM来改变整个网页的细节。

有关JS的问题,有95%其实是DOM的问题。

在传统HTML里分:元素、标签、属性、文本 等等不同物件。但是,在DOM里 任何一个东西统称为 对象,即 节点(Node)。

getElementById   通过 id 获取元素

getElementByTagName   通过标签名 获取元素

getElementByClassName   通过类名获取元素

getAttribute  获取属性

setAttribute  设置属性

childNodes

nodeType  节点类型

nodeValue

firstChild   lastChild

createElement   创建元素

appendChild   插入子节点

createTextNode  创建文字

insertBefore()   把1个新元素插入1个现有元素之前  p109

parentNode  父节点   p109

DOM的本质 和 方法的更多相关文章

  1. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  2. JQ中的clone()方法与DOM中的cloneNode()方法

    JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...

  3. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  4. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  5. React 入门与实战-课时7 虚拟DOM的本质和目的

    DOM树的概念: 一个网页呈现的过程: 1.浏览器请求服务器获取页面HTML代码 2.浏览器先在内存中,解析DOM结构,并在浏览器内存中,渲染出一颗DOM树: 3.浏览器把DOM树,呈现到页面上: R ...

  6. .NET C#基础(4):属性 - 本质是方法

    0. 文章目的   本文面向有一定.NET C#基础知识的学习者,介绍C#中属性的属性.定义.使用方法以及特殊性. 1. 阅读基础   理解C#基本语法(定义类及类成员,调用方法)   认可OOP的封 ...

  7. DOM相关属性,方法,兼容性问题处理小析

    DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素.DOM节点类型有12种. (一)属性 一.子节点操作1.所有子节点(1)元素.childNodes ...

  8. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  9. jquery: json树组数据输出到表格Dom树的处理方法

    项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...

随机推荐

  1. JS 之 每日一题 之 算法 ( 有多少小于当前数字的数字 )

    给你一个数组 nums,对于其中每个元素 nums[i],请你统计数组中比它小的所有数字的数目. 换而言之,对于每个 nums[i] 你必须计算出有效的 j 的数量,其中 j 满足 j != i 且 ...

  2. vue 引用高德地图

    vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...

  3. 尚硅谷Java高级笔记

    尚硅谷Java高级笔记 idea的使用: 一些小区别: 其他细节参考idea配置pdf 多线程: 基本概念: 多线程的优点: 何时需要多线程: 线程的创建和使用: 创建多线程的第一种方式: /** * ...

  4. 可选链运算符、空值合并运算符 --应用到vue项目

    1.npm安装 npm install @babel/plugin-proposal-optional-chaining // 可选链运算符 ?. npm install @babel/plugin- ...

  5. Alex网络结构

    AlexNet网络结构   网络包含8个带权重的层:前5层是卷积层,剩下的3层是全连接层.最后一层全连接层的输出是1000维softmax的输入,softmax会产生1000类标签的分布网络包含8个带 ...

  6. 迷宫2----BFS

    题目 :蒜头君在你的帮助下终于逃出了迷宫,但是蒜头君并没有沉浸于喜悦之中,而是很快的又陷入了思考,从这个迷宫逃出的最少步数是多少呢?输入格式第一行输入两个整数 n 和 m,表示这是一个 n×m 的迷宫 ...

  7. 数据结构逆向分析-Vector

    数据结构逆向分析-Vector 这个应该是家喻户晓了的东西把,如果说C/C++程序员Vector都不用的话,可能就是一个不太好的程序员. Vector就是一个STL封装的动态数组,数组大家都知道是通过 ...

  8. 【PHP数据结构】链表的相关逻辑操作

    链表的操作相对顺序表(数组)来说就复杂了许多.因为 PHP 确实已经为我们解决了很多数组操作上的问题,所以我们可以很方便的操作数组,也就不用为数组定义很多的逻辑操作.比如在 C 中,数组是有长度限制的 ...

  9. TP5 数据保存、更新问题(save、saveAll)

    一.今天写项目的时候,突然发现一个坑爹的问题,使用saveAll新增多条数据,但是一直提示缺少更新条件,然而我发现代码里面并没有更新,而且saveAll我仅仅是去新增多条数据而已 原来源码 模型类中有 ...

  10. javascript base64 encode decode 支持中文

    * 字符编码 ** 一定要知道数据的字符编码 ** 使用utf-8字符编码存储数据 ** 使用utf-8字符编码输出数据 * Crypto.js 支持中文 Base64编码说明 Base64编码要求把 ...