javascript中的DOM介绍（一）

【javascript中的DOM介绍（一）】的更多相关文章

javascript中的DOM介绍（一）

一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DOM对象都是以COM对象形式实现的,因此出现了不少不可兼容的东西二.Node.ELEMENT_NODE常量 1.经本人实测,因为此常量在IE9以下就不支持了,所以一般在检测元素的时候都会用nodeType属性,而nodeType属性根据元素的类型不同,用12个常量值来表示,比如元素节点nodeTyp…

借助JavaScript中的Dom属性改变Html中Table边框的颜色

借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页面标题卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript&quo…

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…

JavaScript中的DOM及相关操作

一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM,而树形结构就是我们常说的DOM树. 维基百科中介绍DOM更为准确:DOM是一种跨平台和语言非依赖性的应用程序编程接口,即处理现在的HTML,XHTML或XML文档作为树结构,其中每个节点是一个对象,每个节点表示…

Javascript中的delete介绍

关于JavaScript中的Delete一直没有弄的很清楚,最近看到两篇这方面的文章,现对两文中部分内容进行翻译(内容有修改和添加,顺序不完全一致,有兴趣推荐看原文),希望能对大家有所帮助一.问题的提出我们先来看看下面几段代码,要注意的是,以下代码不要在浏览器的开发者工具(如FireBug.Chrome Developer tool)中运行,原因后面会说明: 为什么我们可以删除对象的属性: var o = { x: 1 }; delete o.x; // true o.x; // undef…

JavaScript 中的函数介绍

简而言之函数只不过是一组执行某个操作的语句.函数可能会有一些输入参数(在函数体中使用),并在执行后返回值. JavaScript函数也具有这些特性,但它们不仅仅是常规函数.JavaScript函数是对象.你可以查看我曾经写的关于JavaScript对象的文章,里面我提到几乎JavaScript中的所有一切都是对象. 作为对象,JavaScript函数可能会有属性和其他函数(方法).让我们来看看JavaScript中的一个典型的函数定义. function myNotSoGreatFunc(vis…

一些JavaScript中的DOM的优化小技巧

在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象集合 NodeList 当我们调用:getElementsByTagName,getElementsByName,getElementsByClassName的时候,返回的结果是一个NodeList,这个NodeList是实时的.如果你修改对应的html,那么NodeList中也会得到修改. 而且,…

Javascript中的DOM实现显示鼠标的空间位置

为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发奇想.那我可不能够通过DOM中的createElement创建一个标签元素用于在相应的鼠标位置显示当前的鼠标相对于浏览器的坐标呢? 这里我先利用Element中的createElement()方法,创建一个div的标签.为了让标签信息能显示在鼠标相应的位置处,利用div.style将相应的top.l…

初步总结javascript中学习DOM之前的知识

嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把这些重新练习了一下,感觉还是蛮容易找到学习的兴趣的,顿时就默默的开始了今天的练习过程.今天就总结下初步认识javascript时间的一些实例,记得前面总结的并不完全,所以在这里总结一下基本概念. 一.基本的认识一些类型和方法 <script> ); //数组的长度为3 colors[] = &qu…

javaScript中的DOM补充

一.DOM树二.DOM节点 DOM 是这样规定的: 整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点其中,document与element节点是重点. 三.节点查找 (1)直接查找节点 1 2 3 4 document.getElementById(“idname”) document.getElementsByTagName(“tagname”) document.get…

javascript中in用法介绍

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // for-in 一般用来遍历对象, 也可以用来遍历数组 // var…

JavaScript中的DOM函数与关键字汇总

DOM节点的属性属性描述 attributes数组获取某个节点的所有属性子节点(实际是一个NodeList对象) childNodes数组获取某个节点的所有子节点,可以按数组方式访问子节点,另外还包括属性length以及方法item()(实际是一个Nodelist对象) firstChild 获取某个节点的第一个子节点 lastChild 获取某个节点的最后一个子节点 localName 返回被选元素的本地名称 nextSibling 获取某个节点的下…

JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法

今天在写一个todolist待办事项项目,需要单击编辑待办事项的内容,百度搜了一下这几个方法的用法,总结一下 focus()方法:获得键盘焦点,单击之后就调用绑定的js方法,在span标签里面加一个输入框,然后进行编辑 onblur()方法:失去键盘焦点,编辑结束之后,随意鼠标单击任意地方更新编辑的内容 setSelectionRange():js控制输入框光标位置这三个方法组合起来可以用做鼠标点击事件,然后进行内容编辑,内容编辑时使用setSelectionRange()选中所有文本,就可以…

DOM【介绍、HTML中的DOM、XML中的DOM】

什么是DOM? DOM(Document Object Model)文档对象模型,是语言和平台的中立接口. 允许程序和脚本动态地访问和更新文档的内容. 为什么要使用DOM? Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强. HTML的DOM HTML的DOM是一个内存对象树,在浏览器中只保存一份,HTML的DOM修改HTML的内容会直接反应到浏览器中 API NODE对象API 在DOM眼中,HTML是由…

javascript中的数据结构

Javascript中的关键字 abstract continue finally instanceof private this boolean default float int public throw break do for interface return typeof byte …

javascript中的一些核心知识点以及需要注意的地方

前言近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不大又拿最近做webapp view 转场动画研究,就是几个demo不断测试,感觉没有什么可说的最后甚至对webapp中的History的处理方案也是有一些心得,一点方案,但是依旧难以整理成文,于是便开始文荒了这个时候不妨便温故知新吧,对javascript的一些老知识点进行整理回顾,之后有大动…

【原】理解javascript中的this

最近的文章基本都是总结javascript基础内容的,因为我觉得这些东西很重要.而且很多时候你觉得你理解了,其实并没有你自认为的那么理解.十月份没怎么写文章,因为国庆出去玩的比较久,心变野了,现在是时候重新回到学习的轨迹了,今天要总结的是javascript中的this. 介绍this之前,先来两句话,这两句话比较重要,可以说贯穿全文. 1.this的最终指向的是那个调用它的对象 2.如果一个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象下面通过一些…

JavaScript中的各种宽高以及位置总结

JavaScript中的各种宽高以及位置总结在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如…

javascript中DOM部分基础知识总结

1.DOM介绍 1.1 DOM概念文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. HTML文档中的每个成分都是一个节点.HTML文档中的所有节点组成了一个文档树(节点树).HTML文档中的每个元素.属性.文本等都代表着树中的一个节点.树起始于文档节点,并由此继续延伸枝条,直到处于这棵树最低级别的所有文本节点为止.学习DOM,就是学习一些操作页面元素的API(方法).下图表示一个文…

前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2.内接js <script…

javascript 获取iframe中的dom

太扯了,一个多小时都没搞定,获取不到iframe中的dom元素. <div id="one"> this is one </div> <div> <iframe src="./demo.html" id="test"> </iframe> </div> <script type="text/javascript"> console.log(wi…

Python自动化【第十五篇】：CSS、JavaScript 和 Dom介绍

本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 z-index:数值大的在上边 overflow: hidden 超过div的宽度后隐藏 auto 出现滚动条 hover: 当鼠标移动到当前标签上时才生效 background-image:url('1.jpg') #默认 div大,图片水平放置 background-repeat:no-re…

javascript中的splice方法介绍&示例

javascript 中的 splice 方法很强大,它可以用于插入.删除或替换数组的元素. 下面来一一介绍! 删除:用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 插入:向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数(插入的项) 替换:向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) var lang = ["php&…

【转】javascript 中that的含义示例介绍

var that = this;,这代表什么意思呢?this代表的是当前对象,var that=this就是将当前的this对象复制一份到that变量中,下面为大家介绍这样做有什么意义你可能会发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢? 在javascript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? 复制代码代码如下: $('#zhetenga').click(func…

JavaScript中的运算符种类及其规则介绍

JavaScript中的运算符有很多,主要分为算术运算符,等同全同运算符,比较运算符,字符串运算符,逻辑运算符,赋值运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的运算符. 一.JavaScript运算符的种类 1.算术运算符:+ . - .* . / . % . -(一元取反) . ++ . -- 2.等同全同运算符:== . ===. !== . !=== 3.比较运算符:< . > . <= . >= 4.字符串运算符:&…

javascript中0级DOM和2级DOM事件模型浅析

Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button" onclick="alert('Button Click')" /> 当上面的button被点击后,会弹出一个框显示"Button Click". 在javascript中添加事件监听函数有多种方法,比如: 在html元素上 [xhtml] view…

JavaScript中DOM的层次节点(一)

DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点类型,每种都拥有自己的特点.数据和方法,并且和其他节点存在着某种关系. html元素称为文档元素,所有的元素都包含在文档元素中,并且每个文档只有一个html元素. 1 Node类型 DOM1级定义了Node接口,该接口由DOM中的所有节点类型实现.这个接口在JavaScript中是作为Node类型实…

JavaScript中易混淆的DOM属性及方法对比

JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承自ParentNode,返回值是一个HTMLCollection实例,成员是当前节点的所有元素子节点,该属性只读,且该属性是动态集合. Node.prototype.childNodes:该属性继承自Node,返回值是一个NodeList实例,成员是当前节点的所有子节点(包括但不限于元素子节点),该…