________('div#container') queryselector 获取ul中的第2个li元素,请补全横线处数字 document.querySelectorAll('ul li')[__...如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性值 DOM添加 名称 描述 createElement(tagName) 创建一个由标签名称...如果属性名原来包含“-”,则需转换为小驼峰形式,如:backgroundColor,marginLeft 通过classList控制样式 classList属性返回一个元素类属性集合(这里可以简单理解为类名的集合...history.back() forward() 返回历史记录的下一个url history.back() go(n) 返回相对于当前记录的第n个url n>0,表前进;nn=0,刷新当前页..._) } 0 # history对象的go方法参数为数字,不同的数字大小对应不同的跳转动作 # 返回相对于当前记录的第n个url n>0,表前进;nn=0,刷新当前页
(5)、原始数据类型和引用数据类型变量在内存中的存放如图1-4所示,原始数据类型与地址存放在栈中,引用类型存放在堆中。...图1-4 原始数据类型和引用数据类型存放 (6)、JavaScript中对类型的定义:一组值的集合。如Boolean类型的值有两个:true、false。...Undefined和Null 类型都只有一个值,分别是undefined和null。 Null 类型只有一个值,就是 null ;Undefined 类型也只有一个值,即 undefined 。...DOM允许开发人员对一个树状的文档进行访问,如查询、删除、修改页面中的某个节点。...); //获得第1个标签为div的元素,在该元素中查找第1个子元素Id为p7的元素 var divp7 = document.querySelector("div").querySelector
获取元素节点信息常用属性: 名称 描述 innerHTML 返回元素内包含的所有HTML内容(文本和标签),类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合...常用的节点属性获取方式: 名称 描述 getAttribute() 返回元素一个指定的属性值 直接使用属性名称获取 适用于部分属性(如:title,value,href) (1)获取id名为container...(2)获取ul中的第2个li元素,请补全横线处数字。...如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性值 2....url history.back() go(n) 返回相对于当前记录的第n个url n>0,表前进;nn=0,刷新当前页 history.go(-1)history.go(1) 4. navigator
,其子对象也有其 特有的属性和方法 使用 window 子对象时,可以使用完整语法,也可以忽略 window,如:window.alert() 与 alert()效果相同 window对象...history.back() forward() 返回历史记录的下一个url history.forward() go(n) 返回相对于当前记录的第 n 个 url n>0,表前进;nn...(间接查找) 方法 说明 innerHTML 返回元素内包含的所有 HTML 内容(文本和标签),类型为字符串 innerText 和innerHTML类似,但是只返回文本 children 返回指定元素的子元素节点集合...('.box').lastElementChild.value 常用的节点属性获取方式 方法 说明 getAttribute() 返回元素一个指定的属性值 直接使用属性名称获取 适用于部分属性(如:title...如果属性已经存在,则更 新该值;否则,使用指定的名称和值添加一个新的属性; JS示例代码 <p class="item" title
请记住:一些高端旗舰设备推动外壳的发展,但世界上大多数使用的设备类型与这些规格怪物相比,看起来更像一个带有液晶显示屏的算盘。 我们想帮助并且给予您正确使用CSS3的力量。...在下一层中,浏览器生成每个元素的形状和位置 - 布局。也就是浏览器设置页面属性,如width和height,以及它的margin或left/top/right/bottom。 3.着色 ?...现代浏览器可以很好的支持四种动画风格的属性,使用transform和opacity属性来制作。...我们将创建一个非常简单的结构,并将我们的应用程序菜单放在布局类中。...我们来看看我们是如何在JavaScript中控制app-menudiv: function toggleClassMenu() { var layout = document.querySelector
对象,还有其他几种类型的节点对象也继承Node对象,如文本(Text)、注释(Comment)等。...querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。 querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。...的第1个div console.log(document.querySelector('div[name]')); // 获取含有name属性的第1个div console.log(document.querySelector...('div.bar')); // 获取文档中class为bar的第1个div console.log(document.querySelector('div#box')); // 获取文档中...id为box的第1个div Element对象的方法和属性 在DOM操作中,元素对象也提供了获取某个元素内指定元素的方法,常用的两个方法分别为getElementsByClassName()和getElementsByTagName
Web APIs - 第1天笔记 了解 DOM 的结构并掌握其基本的操作,体验 DOM 的在开发中的作用 知道 ECMAScript 与 JavaScript 的关系 了解 DOM 的相关概念及...【属性节点】是指 HTML 标签中的属性,如上图中 a 标签的 href 属性、div 标签的 class 属性。 【文本节点】是指 HTML 标签的文字内容,如 title 标签中的文字。...; 上述列举了 document 对象的部分属性和方法,我们先对 document 有一个整体的认识。...通过元素节点获得的 style 属性本身的数据类型也是对象,如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。...,通过 style 属性可以动态更改网页标签的样式,如要遇到 css 属性中包含字符 - 时,要将 - 去掉并将其后面的字母改成大写,如 background-color 要写成 box.style.backgroundColor
因为属性和复杂关系通常是由中介节点如空白节点连接的或抽象的实体建模时根据RDF形式主义,RESCAL的这种集体学习能力是语义网学习的一个非常重要的特性。...下面的章节将更详细地介绍RESCAL算法,将讨论RDF(S)数据如何在RESCAL中被建模为一个张量,并将介绍一些对算法的新扩展。 语义Web数据建模 让关系域由实体和二元关系类型组成。...使用RESCAL,将这些数据建模为一个大小为n×n×m的三向张量X,其中张量的两个模态上的项对应于话语域的组合实体,而第三个模态拥有m不同类型的关系。...设一个关系域由n个实体和m个关系组成。使用RESCAL,将这类数据建模为一个大小为n×n×m的三向张量X,其中张量的两个模态上的项对应于话语域的组合实体,而第三个模态包含m种不同类型的关系。...因此,我们在第3.5节中提出了对RESCAL的有效扩展,这样实体的属性,即文字值,可以包含在分解中。
随后本章将会讨论许多类型的事件。对象的type属性一般持有一个字符串,表示事件(例如"click"和"mousedown")。...但在查找组合键时,你也可以查看键盘和鼠标事件的shiftKey、ctrlKey、altKey和metaKey属性来判断这些键是否被按下。...大多数节点不能拥有焦点,除非你给他们一个tabindex属性,但像链接,按钮和表单字段可以。 我们将在第 18 章中回顾表单字段。...第 18 章将展示如何实现。 指针事件 目前有两种广泛使用的方式,用于指向屏幕上的东西:鼠标(包括类似鼠标的设备,如触摸板和轨迹球)和触摸屏。 它们产生不同类型的事件。...事件和事件循环 在事件循环的上下文中,如第 11 章中所述,浏览器事件处理器的行为,类似于其他异步通知。 它们是在事件发生时调度的,但在它们有机会运行之前,必须等待其他正在运行的脚本完成。
事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...,函数中判断浏览器的类型: ?...所以,在事件处理函数中声明1个形参用来接收事件对象。 ? 这个event是个形参,系统帮我们设定为事件对象,不需要传递实参过去。... e = e || window.event; console.log(e); } 事件对象的属性和方法...百度 // 常见事件对象的属性和方法 // 1.
addEventListener 是 DOM 对象专门用来添加事件监听的方法,它的两个参数分别为【事件类型】和【事件回调】。 结论:【事件类型】决定了事件被触发的方式,如 click 代表鼠标单击,dblclick 代表鼠标双击。...事件处理程序 addEventListener 的第2个参数是函数,这个函数会在事件被触发时立即被调用,在这个函数中可以编写任意逻辑的代码,如改变 DOM 文本颜色、文本内容等。...事件类型 将众多的事件类型分类可分为:鼠标事件、键盘事件、表单事件、焦点事件等,我们逐一展开学习。 鼠标事件 鼠标事件是指跟鼠标操作相关的事件,如单击、双击、移动等。...事件回调函数的【第1个参数】即所谓的事件对象,通常习惯性的将这个对数命名为 event、ev 、ev 。
342 参数和实参有什么区别? 343 数组中 some 方法的目的是什么? 344 你如何组合两个或多个数组? 345 浅拷贝和深拷贝有什么区别? 346 你如何创建一个字符串的特定数量的副本?...一个纯函数是在返回值是由它的参数没有任何副作用只有确定的函数。即如果您在应用程序中调用具有相同参数 ‘n’ 次和 ‘n’ 个位置的函数,则它将始终返回相同的值。...:用于查找包含零次或一次 n 的任何字符串的匹配项 ⬆ 返回顶部 回到第150题 ---- 158.什么是 RegExp 对象? RegExp 对象是一个具有预定义属性和方法的正则表达式对象。...由于1和2是数值,前两位数字的结果将是数值3。下一个数字是字符串类型值,因为数值3和字符串类型值3的相加只是一个串联值33。 ⬆ 返回顶部 回到第150题 ---- 163.什么是调试器语句?...您还可以执行其他系统命令,如剪切和粘贴。
但是很多开发小伙伴对DOM,BOM缺乏一个系统的认识,今天这篇文章主要讲述DOM和BOM的体系化知识。 ECMAScript,描述了该语言的语法和基本对象,如类型、运算、流程控制、面向对象、异常等。...Element,document 和 window 是最常见的 event targets EventTarget有三个原型方法,在window和DOM元素上都可以使用 addEventListener...概述 DOM的最小组成单位叫做节点(node),一个文档的树形结构(DOM树),就是由各种不同类型的节点组成。 Node是一个接口,各种类型的 DOM API 对象会从这个接口继承。...文档碎片节点 文档的片段 常用属性 Node 有几个非常用且重要的属性 nodeName:node节点的名称; nodeType:可以区分节点的类型; nodeValue:node节点的值;...,顾名思义,dom中的文字 comment 节点 Comment代表注释节点,顾名思义,html 中写的注释 Attr 节点 元素的特性在DOM中以Attr类型表示。
整体开发过程分成 4 步,第 1 步用 CSS 实现页面的静态布局,后面 3 步用 JS 实现动画和业务逻辑。...第 2 步实现单词中间字母 OO 的眨眼效果,第 3 步实现随机取单词的逻辑,第 4 步实现字符的切换动画。 眨眼动画和字符切换动画都是用 Web Animation API 实现的。...,第 1 个参数是一个数组,用于定义关键帧;第 2 个参数是一个对象,用于定义动画属性,它们分别对应着 CSS 中的 @keyframes 语句和 animation 属性。...在点击事件中调用上面的函数,把结果存入一个名为 chars 的变量中: let word = new Word() document.querySelector('.word').onclick =...接下来写动画效果,方法和写眨眼动画类似。
DOM节点 含义 DOM树中每一个内容都称之为节点 DOM树 节点类型 元素节点() 所有的标签,比如:body , div 属性节点 所有的属性,比如:href 文本节点...所有的文本 节点操作 查找结点 父节点 语法: 子元素.parentNode (这是属性) // 查找son的父元素 let son = document.querySelector...查找下一个兄弟节点 点击 第1个 第2个...第3个 第4个 // 演示兄弟节点 let btn = document.querySelector...() { // 上一个兄弟节点 属性 console.log(two.previousElementSibling) //
querySelector() querySelector()它接受一个参数,它返回文档中匹配指定 CSS 选择器的一个元素。如有没有匹配到的话就返回null。...querySelectorAll() 这个方法和querySelector方法一样,只不过它是查询匹配所有的节点,不是一个,这个方法返回的是NodeList的实例。...它经常和if出现在一起。 元素遍历小知识 ie9之前的版本不会把元素间的空格当成空白节点,而其他浏览器会,这样导致了childNodes和firstChild等属性上的差异。...Element Traversal API 为 DOM 元素添加了 5 个属性: childElementCount,返回子元素数量(不包含文本节点和注释); firstElementChild,指向第一个...在支持的浏览器中,所有 DOM 元素都会有这些属性,为遍历 DOM 元素提供便利。这样开发者就不用担心空白文本节点的问题了。
事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...,函数中判断浏览器的类型: ?...Js代码中只能执行捕获或者泡其中的一个阶段。 2. onclick和attachEvent 只能得到冒泡阶段。...e = e || window.event; console.log(e); } 事件对象的属性和方法...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: 咱们班有100个学生,快递员有100个快递, 如果一个个的送花费时间较长。
四、操作属性 我们可以通过JavaScript获取和设置元素属性,例如input的value属性值,或者img的src属性。...首先我们来实现一个效果,在文本框中输入字符串,然后点击按钮用在控制台输出我们输入的字符串 示例代码如下: 1 2 输出 3...五、数学计算案例 下面我们来实现一个能完成数学计算的程序,页面有四个文本框和一个按钮,我们在第一个文本框输入一个数字,在第二个文本框输入一个操作符,第三个文本框再输入一个数字,然后当我们点击计算按钮的时候...,会在第四个文本框计算出结果,这个例子和我们学习switch语句的时候写的例子很像,但是那时候我们没有可操作的页面,现在我们把计算功能写在一个函数中。...("button"); 12 btn.onclick = function(){ 13 var n = Number(num1.value); //将字符串类型转换成数字类型
节点与元素 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点...NodeList 对象代表一个有顺序的节点列表 以下方法获取的为element 元素对象 document.getElementById(“id属性”) document.querySelector(‘...console.log(elements.namedItem('demo')); HTMLCollection 对象中的属性和方法: 属性 / 方法 参数 描述 length 无 返回 HTMLCollection...NodeList 对象中的属性和方法: | 属性 / 方法 | 参数 | 描述 | | ———— |————— | ——...文本节点、元素节点、属性节点、注释节点 HTMLCollection 不是一个数组!
document 和 window 之间的区别 简单来说,document是window的一个对象属性。window 对象表示浏览器中打开的窗口。...所有的全局函数和对象都属于 window 对象的属性和方法。 区别: window 指窗体。document指页面。document是window的一个子对象。...window暴露了很多属性和方法,如: window.alert('Hello world'); // Shows an alert window.setTimeout(callback, 3000);...// 返回节点的类型,数字形式(1-12) // 常见几个1:元素节点,2:属性节点,3:文本节点。...: document.querySelector('h1').nodeType; 上面会返回1,它是Element类型的节点的标识符,还可以检查节点名称: document.querySelector(
领取专属 10元无门槛券
手把手带您无忧上云