【第7天：javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等】的更多相关文章

JavaScript之获取标签

(1)html <p id="txt">这是P标签</p> <h1 id="txt" style="color: red;">这是标题</h1> <ul> <li></li> <li></li> <li class="one"></li> <li class="one"&…

DOM操作标签，事件绑定，jQuery框架

DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变量名 = document.createElement('标签(a,p,div....)') 例如: var aEle = doucument.createElement('a') 创建一个a标签 <a></a> 还可以给我们创建的a标签设置属性: aEle.href = 'www.b…

DOM操作标签、事件绑定、jQuery框架/类库

DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定位置 var aEle = document.createElement('a') # 创建a标签 aEle.href = 'https://www.sogo.com/' # 设置href属性 aEle.innerText = '点我去搜狗' # 设置文本内容 var divEle = docume…

JS——input标签注册事件

注意:淘宝的lable是用定位制作的,事件是oninput事件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .wrong { border: 2px solid red; } .right { border: 2px solid #91B81D; } .l…

【JAVASCRIPT】获取触发MESSAGE事件的源IFRAME

先让发送源获取焦点,然后获取焦点元素. window.addEventListener('message',function(msg){ //做一些事来判断是不是某个iframe发送的消息 msg.source.focus(); var sourceFrame=document.activeElement; }); 如果不想影响焦点的话,可以遍历一遍所有的iframe function findIframe(win){ var fs=document.querySelectorAll('ifra…

第7天：javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等

javascript WEB api------DOM document object model 案例 为元素注册点击事件,弹出对话框 <input type="button" id="btn" value="开发分离"> <input type="button" id="btn2" value="最终版"> <script> //定义函数 func…

Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它. 浏览器负责将标签翻译成用户"看得懂"的格式,呈现给用户!(例:djangomoan模版引擎) 翻译成人话:一套规则,浏览器认识的规则. 标准模板: <!DOCTYPE html> #标准规范 <html lang="en&q…

webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Object Model--->浏览器对象---->操作浏览器 1,什么是api-----可以理解为一套方法(或者工具) 2,什么是webapi-----那就是网络提供的方法(或者工具) 获取页面元素的几种方法 1,根据标签名获取元素 document.getElementsByTagName('div')…

javascript中获取非行间样式的方法

我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.attr获取就是一个空字符. 今天我们来介绍下要获取节点计算后的样式就是不一定写在行间样式的方法. 1:window.getComputedStyle(obj,false)['attr']方法 这是BOM(浏览器window对象)提供的方法 ,所以可以直接写成getComputedStyle(node…

JS---DOM---设置和获取---标签内容和文本内容

设置和获取---标签内容和文本内容   总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作用是在标签中设置新的html标签内容, 是有标签效果的   想要设置标签内容, 使用innerHTML  想要设置文本内容, innerText或者textContent, 或者innerHTML, 推荐用innerHTML   总结---获取: innerText可以获取标签中间的文本内容, 但是…

js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素.        event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'. 1.event.target和event.currentTarget的区别是什么? target属性的值是发生事件的那个元素,currentTarget是绑定事件的那个元素,相当于this…

JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以读取文本框中的值.设置文本框中的值. JavaScript→DOM就是C#→.Net Framwork.没有.net,C#只能for.while,连WriteLine.MessageBox都不行.DOM就是一些让JavaScript能操作Html页面控件的类.函数. DOM也像WinForm一样,通…

JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌握如何设置DOM元素的样式 DOM查找方法 语法:document.getElementById(“id”) 功能:返回对拥有指定ID的第一个对象的引用 返回值:DOM对象 说明:id为DOM元素上id属性的值 DOM查找方法 语法:document.getElementsByTagName(“ta…

JavaScript dom 标签属性

节点: 平时开发中常用的节点是: 元素节点:nodeType值是 1    --> <a>,<p>...... 属性节点:nodeType值是 2    --> title,href,src...... 文本节点:nodeType值是 3    --> 内容 获取html标签内容: document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容 document.getElementsByTa…

JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> <li><a href="../image-load/image-load.html">Image-Load</a></li> <li><a href="../click/click.html">Cli…

javascript中获取dom元素的高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH…

javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH…

js | javascript中获取dom元素的高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH…

java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）

1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // BOM:浏览器对象,broswer object…

javascript 获取标签内的内容

js 获取标签内的内容 参考:这篇博客给了我很大的启发. http://www.cnblogs.com/breakdown/archive/2012/10/09/2716221.html 我遇到的问题:获取span标签中的值51,各种折腾:正则,截取,替换,最后参考上文使用替换解决了.特感谢博主. <a href=""><span id="span4028807e4ebe04ee014ebea76a6d0001alarm" style="…

Javascript - DOM文档对象模型

文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Javascript通常都是用来进行DOM操作和交互的window对象作为DOM里的全局对象,在页面上创建的所有全局对象都会作为window对象的属性而得以存在实际上DOM不是Javascript也不是浏览器厂商擅自给出的时髦的DHTML(通过CSS实现的一种不用编程即可简单动态化HTML文档)概念,它…

常见的原生javascript DOM操作

1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写. var div = document.createElement("div"); 使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性,可以操作元素的特性. div.id = &quo…

Javascript + Dom知识点总结

Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = "1"; arr["1"] = "2"; arr["2"] = "3"; arr["3"] = "4"; // 简化的声明方式 ]; // 普通数组,用中括号隔开 }; al…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

《JavaScript Dom编程艺术》（第二版）

第一章<JavaScript简史> 1.JavaScript是一种脚本语言,通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,它需要由Web浏览器进行解释和执行. 2.DOM是一套对文档的内容进行抽象和概念化的方法,它是一种API(应用编程接口). W3C对DOM的定义是:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容.结构和样式. 第二章<JavaScript语法> 1.驼峰格式(camel case)命名:删除…

JavaScript DOM编程艺术读书笔记(一)

第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML(Dynamic HTML):动态HTML的简称,不是一项新技术,而是通过HTML CSS 和Javascript组合的.DHTML背后的含义其实就是: 利用HTML把网页标记为各种元素: 利用CSS设置元素样式和它们显示的位置: 利用JavaScript实时地操纵页面和改变样式. 但是虽然浏览器制造…

javascript DOM 操作

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 <!DOCTYPE html> <html> <head&…

HTML 学习笔记 JavaScript (DOM)

一 DOM 简介 通过HTML DOM 可以访问JavaScript 文档的所有元素 当网页被加载的时候,浏览器会创建页面的文档对象模型 HTML DOM 模型被构造成对象的树 HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事…

javascript中获取屏幕尺寸

Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小 屏幕的有效宽:window.screen.availHeight屏幕的有效高:window.screen.availWidth网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (…

javaScript DOM JQuery AJAX

http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 1.1 JavaScript代码存在形式 <!-- 方式一 --> <script type="text/javascript" src="JS文件&…