阿乐のBlog - aqingya.cn

DOM简介：通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。 HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被结构化为对象树：对象的 HTML DOM 树通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量： JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在页面中创建新的 HTML 事件什么是 DOM？DOM 是一项 W3C (World Wide Web Consortium) 标准。 DOM 定义了访问文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接 ...

发表于2020-05-26|DOM|JavaScript•DOM| 条评论

遍历“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型: NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先( depth-first )的遍历操作。 DOM遍历是深度优先的DOM结构遍历，也就是说，移动的方向至少有两个(取决于使用的遍历类型)。遍历以给定节点为根，不可能向上超出DOM树的根节点。任何节点都可以作为遍历的根节点。如果假设元素为根节点，那么遍历的第一步就是访问<p>元素，然后再访问同为<body>元素后代的两个文本节点。不过，这次遍历永远不会到达<html><head>元素，也不会到达不属于<body>元素子树的任何节点。而以document为根节点的遍历则可以访问文档中的全部节点。下图展示了对以document为根节点的DOM树进行深度优先遍历的先后顺序。NodeIterator 和TreeWalker都以这种方式遍历。 1、NodeIterator使用document.createNodeIterator() 方法来创建它的 ...

JavaScript DOM2 - 遍历

发表于2020-05-25|DOM|JavaScript•DOM| 条评论

访问元素的样式通过JS修改元素的样式：语法：元素.style.样式名=样式值 (样式值必须是字符串样式) 注意：如果css的样式汇总含有 - ，这种名称在JS中是不合法的,比如background-color 需要将这种样式的命名修改为驼峰命名法去掉 - ，然后将 - 后的字母大写。 12box.style.backgroundColor = "yellow"box.style.width = "100px" 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。但是如果在样式中写了！Important，则此时样式会有最高的优先级，即使通过js也不能覆盖该样式，此时将会导致js修改样式失效所以尽量不要为样式添加！Important 通过JS读取内联的样式：语法：元素.style.样式名通过style属性设置 ...

JavaScript DOM ---样式

发表于2020-05-25|DOM|JavaScript•DOM| 条评论

选择符API1、querySlector()方法 querySlector()方法接受一个CSS选择器，返回与该模式匹配的第一个元素。通过Document类型调用querySlector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySlector()方法时，只会在该元素的范围内查找匹配的元素。 1234567891011//取得body元素var body = document.querySelector("body");//取得ID为“mydiv”的元素var myDiv = document.querySelector("#mydiv");//取得类为 "selected"的第一个元素var selected = document.querySelector(".selected");//取得button元素的第一个图像var img = document.body.querySelector("img.button"); 2、query ...

JavaScript --- DOM document 扩展

发表于2020-05-24|DOM|JavaScript•DOM| 条评论

动态脚本创建动态脚本有两种方式。 1、引入外部文件 1<script type="text/javascript" src="aqing.js" ></script> 2、直接插入JavaScript代码 12345678function loadScript(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script);}loadScript("aqing.js"); 动态样式能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入样式。与动态脚本类似。所谓动态样式是指在页面刚加载时不存在的样式；动态样 ...

JavaScript DOM操作技术---动态脚本和动态样式

发表于2020-05-23|DOM|JavaScript•DOM| 条评论

Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。一、文档子节点 1、在document中有一个属性body，它保存的是body的引用（比通过childNodes列表访问的更快，更直接） Var body = document.body; 2、Doucument.doucumentElement保存的是html根标签 Var html = document.documentElenmet; 3、Document.all 代表页面中的所有元素 var all = document.all; （var all = document.getElementsByTagName(“*”)）效果一样。它返回一个数组 4、根据元素的class属 ...

JavaScript --- DOM document类型

发表于2020-05-22|DOM|JavaScript•DOM| 条评论

DOM简介：通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。 HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被结构化为对象树：对象的 HTML DOM 树通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量： JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在页面中创建新的 HTML 事件什么是 DOM？DOM 是一项 W3C (World Wide Web Consortium) 标准。 DOM 定义了访问文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接口， ...

JavaScript --- DOM简介和 DOM Node节点的增删改查

发表于2020-05-22|DOM|JavaScript•DOM| 条评论

BOM简介JavaScript的实现包括以下3个部分： 1）核心（ECMAScript）：描述了JS的语法和基本对象。2）文档对象模型（DOM）：处理网页内容的方法和接口3）浏览器对象模型（BOM）：与浏览器交互的方法和接口 ECMAScript扩展知识： ① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash。③ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。 DOM 是为了操作文档出现的 API，document 是其的一个对象；BOM 是为了操作浏览器出现的 API，window 是其的一个对象。 BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。 ...

JavaScript --- BOM

发表于2020-05-21|BOM|JavaScript•BOM| 条评论

闭包的几种概念理解：能够访问另一个函数作用域的变量的函数。清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。闭包是指有权访问另一个函数作用域中的变量的函数能够读取其他函数内部变量的函数。或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。 ...

JavaScript --- 闭包详解

发表于2020-05-20|JavaScript|JavaScript| 条评论

作用域1、理解就是一块“地盘”，一个代码所在的区域它是静态的（相对于上下文对象），在编写代码时就确定了 2、分类全局作用域函数作用域块级作用域 3、作用隔离变量，不同作用域下的同名变量不会有冲突。作用域与执行上下文1、区别1 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时。全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建。函数执行_上下文环境是在调用函数时，函数体代码执行之前创建。 2、区别2 作用域是静态的，只要函数定义好了就一直存在，且不会再变化。上下文环境是动态的，调用函数时创建，函数调用结束时，上下文环境就会释放。 3、联系上下文环境（对象）是从属于所在的作用域。全局上下文环境—>全局作用域。 ...

JavaScript --- 作用域与作用域链

发表于2020-05-19|JavaScript|JavaScript| 条评论

数据库加载中