JavaScript学习笔记之DOM对象

【JavaScript学习笔记之DOM对象】的更多相关文章

JavaScript学习笔记之DOM对象

目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允许我们通过脚本对页面中的所有元素进行访问和设置注意:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问 (1)集合 all[]:提供对文档中所有 HTML 元素的访问 anchors[]:返回对文档中所有 Anchor 对象的引用 lin…

JavaScript:学习笔记(9)——Promise对象

JavaScript:学习笔记(9)——Promise对象引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作: request.onreadystatechange = function () { if (request.readyState === 4) { if (request.status === 200) { return success(request.responseText); } els…

JavaScript:学习笔记(10)——XMLHttpRequest对象

JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新.这使得Web页面可以只更新页面的局部,而不影响用户的操作.XMLHttpRequest在 Ajax 编程中被大量使用. XMLHttpRequest 支持同步和异步通信.但是,一般来说,出于性能原因,异步请求应优先于同步请求.同步请求阻止代码的执行,这会导致屏幕上出现“冻结”和无响应的用户体验.…

Javascript学习笔记——操作浏览器对象

Javascript学习笔记目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome).Safari和Opera等.我们平时称为五大浏览器.IE最新版为Edge. 对于IE浏览器,有些浏览器提供的对象中的属性兼容性是对版本有要求的,比如IE>8才能支持window对象中的innerWidth和innerHeight属性. 当然,目前我们经常使用的是谷歌浏览器,所以兼容性还是比较…

javascript学习笔记02--面向对象学习

js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习惯叫做类3.javascript 基于对象==面向对象4.javascript 的元素属性可以动态添加面向机器->面向过程->面向对象类和对象的关系 1.类是抽象的概念的 2. 对象时实体的3.类是对象的模板, 创建对象的方法基本语法 ① function 类(){ } …

JavaScript学习笔记之原型对象

本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式:必须配合new操作符使用.在构造函数内部将this当做新对象指针,赋予其属性和方法,然后经历以下四个步骤: 1)创建一个新对象 2)将构造函数的作用域赋给这个新对象(即将this指向这个对象) 3)执行构造函数内部代码(完成对象初始化)…

javascript学习笔记之DOM与表单

DOM(文档对象模型),猫叔了一个层次化的节点树一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.1代表Element,2代表attribute,3代表Text... 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型 2.节点关系相关属性 I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够…

JavaScript 学习笔记-HTML&&DOM

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应查找 HTML 元素通过 id 找到 HTML 元素 var x=document.getE…

【JavaScript学习整理】DOM对象(location history screen navigator)

DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibling: 下一个姐妹或兄弟节点 previousSibling: 前一个兄弟节点案例:打开网页出现随机位置星星,点击星星,星星消失 <script type="text/javascript"> window.onload = init; function init() { w…

javascript学习笔记之DOM

DOM(文档对象模型),描述了一个层次化的节点树一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.常见的有:1代表元素节点,2代表属性节点,3代表文本节点,8代表注释节点,9代表document,11代表iframe 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型.例:如果是元素节点,那么nodeName的值为元素的标签名,nod…

JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效果. 1.1.优点不需要插件支持优秀的用户体验提高Web程序的性能减轻服务器和带宽的负担 1.2.缺点浏览器对XMLHttpRequest对象的支持度不足,几乎所有浏览器现在都支持破坏浏览器“前进”.“后退”按钮的正常功能,可以通过简单的插件弥补对搜索引擎的支持不足 1.3.jQuer…

1.4（JavaScript学习笔记） window对象的属性及方法

一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer(""); 可以将window看做最外层的对象,其他一些了对象都是windows的属性. window对象有很多属性,这些属性提供了对交互的支持(例如document.location...) 二.document对象 document是平时使用较多的对象,代表当前HTML文档. window.document…

JavaScript学习笔记之BOM对象

目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Object Model,BOM)使 JavaScript 可以与浏览器进行交互,以下介绍浏览器对象模型中常用的对象 1.Window window 对象表示浏览器窗口,全局变量是 window 对象的属性,全局函数是 window 对象的方法 (1)属性引用 self:对当前窗口的引用 parent…

JavaScript学习笔记之DOM介绍

目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介文档对象模型(Document Object Model,DOM)使 JavaScript 可以访问和操作 HTML 文档当网页被加载时,浏览器会创建页面的文档对象模型,根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都被视为节点,而 HTML 文档则被视为节点树 2.方法 DOM 方法定义在节点上执行的动作,以下列出常用的 DOM 方法:…

JavaScript学习笔记-正则表达式(RegExp对象)

正则表达式(RegExp对象) 1.正则表达式字面量,在脚本加载后编译.若你的正则表达式是常量,使用这种方式可以获得更好的性能,重复使用时不会重新编译: 2.使用构造函数创建的RegExp,提供了对正则表达式运行时的编译.主要用于当你知道正则表达式的模式会发生改变时,或者你事先并不了解它的模式或者是从其他地方(比如用户的输入),每次使用都会重新编译: var myRe = /d(b+)d/g; var myArray = myRe.exec("cdbbdbsb…

javascript学习笔记 - 面向对象理解对象

ECMAScript 中有两种属性:数据属性和访问器属性一属性类型 1.数据属性.数据属性有4个描述其行为的特性［[Configurable]］表示能否通过delete删除属性从而重新定义属性: 能否修改属性: 能否把属性修改为访问器属性. [[Enumerable]] 表示是否能通过for-in循环进行枚举. [[Writable]] 表示能否修改属性的值 [[value]] 包含这个属性的值.读取和写入属性值,都是从这个位置来操作对象字面量初始化时定义的属性,这些特性默认都是…

JavaScript学习笔记2-数组对象

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> //合并数组 var arr1 = ["Hello","World","PHP","J…

javascript学习笔记(四) Number 数字类型

数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法用科学计数法表示数,参数指定小数位个数 toPrecision() 方法自动判断调用toFixed()或toExponential()方法,参数指定所有数的位数复制代码代码如下: var num = 99; alert(toFixed(2)); //99.00 alert(toExponentia…

JavaScript:学习笔记(8)——对象扩展运算符

JavaScript:学习笔记(8)——扩展运算符对象的扩展运算符扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中. 合并两个对象扩展运算符可以合并两个对象自定义属性合并对象时,可以将对象与一些属性进行合并,如下需要说明的是,如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉. 数组的扩展运算符复制数组数组是复合的数据类型,如果直接…

Javascript学习笔记三——操作DOM（二）

Javascript学习笔记在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原有的内容上进行增添,修改,删除,为了方便操作,Javascript中有些非常实用的属性: 一.innerHTML 二.innerText 三.textContent 等等..我们接下来要操作的就是以上几种属性. 对于<p id = 'test'>Hello!</p> 因为在HTML的…

Javascript学习笔记二——操作DOM

Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点二．querySelector() 返回文档中匹配指定CSS选择器中的一个元素例子: Document.querySelector(“#test”); //查找ID =”test” 的节点 Document.querySelector(“p”);//获取文档中第一个p元素 Document.querySelector(“.exa…