JavaScript学习
一、html中写JavaScript脚本
使用<script type="text/javascript"></script>标签,在html5中,可以省略type,因为html5的默认脚本语言即为JavaScript。<!DOCTYPE html>。
二、
1、isNaN(object),判断对象是否为数字
2、在html元素中可以直接在onclick属性中写JavaScript,要用双引号括起来。如果写函数名,则会执行该函数。参数中可以使用this引用,表示当前元素。
3、动态输出内容,使用document.write("content"),在加载页面时可以使用,在页面加载完毕后若使用该函数则会导致整个页面被覆盖。
4、动态修改页面内容,使用document.getElementById("")、document.getElementsByTagName("")、document.getElementsByName("")来获取元素,再对元素使用innerHtml=""来修改内容,其中Elements是获取的元素数组,访问数组使用下标[i]。
5、向控制台写入内容,一般是调试时使用的,console.log("");
6、字面量:不使用类型名来定义,直接使用内容进行定义的数据类型,字面量都是常亮。有:
数字Number:3.14,5等等,JavaScript的数字都是64位的,包括小数与整数。
字符串String:"abc",'abc'等等,单引号和双引号可以互相嵌套,但是不是自己嵌套自己,要使用的话可以使用转移字符/"。
布尔型Boolean:true,false,直接使用。
数组Array:[40, 100, 1, 5, 25, 10],直接使用方括号括起来的内容就是数组,下标从0开始。
对象Object:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"},使用键值对的形式表示。其中键名也可以使用双引号包括起来,结果是一样的,如{"firstName":"John", "lastName":"Doe", "age":50, "eyeColor":"blue"},引用时可以使用Object.firstName来调用,该调用方法不能用引号。也可以使用Object["firstName"]来调用,该调用方法必须使用引号。遍历Object中变量时,可使用for(x in Object),其中x获取的是所有键名,是字符串格式,所以要用Object[x]来调用。
函数function:function myFunction(a, b) { return a * b;},创建一个myFunction对象,类型为function。调用方法同普通的函数。也可以创建匿名的函数。
7、变量与对象
JavaScript中使用var定义一个局部变量,如果不适用var则为全局变量。
JavaScript中所有事物本质上都是对象。如:(详细对象属性参考JavaScript 参考手册)
(1)Object:使用字面量{a=1,b=2}来创建,或者使用var o = new Object();o.a=1;o.b=2;来创建,或者使用函数(对象)构造器创建。
(2)Number:可以使用字面量数字给变量进行赋值,使用此方式复制后的变量在函数内部是按值传递的。也可以创建为对象var i = new Number(123);此时传递时按对象传递的。在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324。八进制数字以0开头,十六进制以0x开头。
特殊的数字对象:无穷大(Infinity),任何数除以0都得无穷大。非数字值(NaN),这个也是数字对象,表示非数字。
数字属性 | 数字方法 |
MAX_VALUE | toExponential() |
MIN_VALUE | toFixed() |
NEGATIVE_INFINITY | toPrecision() |
POSITIVE_INFINITY | toString() |
NaN | valueOf() |
prototype | |
constructor |
(3)String:同Number,不同的是String可以按照索引来获取字符,如var s = "abcd";s[1];只能读取值,不能修改值。也可以使用var s = new String("abcd");来创建对象。
属性: | 方法: | fromCharCode() | replace() | substr() | valueOf() |
length | charAt() | indexOf() | search() | substring() | |
prototype | charCodeAt() | lastIndexOf() | slice() | toLowerCase() | |
constructor | concat() | match() | split() | toUpperCase() |
(4)Date:Date只能使用new创建,var today = new Date();返回当前日期。或者var d = new Date("日期"或者数字或者多个参数);创建指定日期对象。详细使用参考Date。
(5)Math:Math不能创建对象,只有一个常量和方法,参考Math。
(6)Array:可使用字面量创建Array变量,也可使用构造方法。通常是var a = new Array();a[0]=1;a[1]=2;或者var a = new Array(1,2,3,4);。注意,同一个数组中可以包含不同类型的变量,甚至是函数。详细方法与属性参考Array。
(7)Boolean:可以使用字面量创建,使用构造方法:var b = new Boolean();如果布尔对象无初始值或者其值为:0、-0、null、""、false、undefined、NaN那么对象的值为 false,否则,其值为 true(即使当自变量为字符串 "false" 时)!有两个方法:toString()返回字符串类型,valueOf()返回Boolean类型。
(8)RegExp:正则表达式对象,字面量创建:var patt=/pattern/modifiers;对象方式创建:var patt=new RegExp(pattern,modifiers);正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。非常强大的函数,详细功能参考RegExp。
(9)Function:一个特殊的对象,可以把函数赋值给一个变量如:var f = function (a, b) {return a * b};调用时用f(1,2)调用即可。也可使用构造方法来创建函数对象,如:var myFunction = new Function("a", "b", "return a * b");对比就可以知道构造方法的语法。在 JavaScript 中,很多时候,你需要避免使用 new 关键字。(作为对象的函数只能是匿名函数,即不带函数名的函数。即使带了函数名,也不能使用函数名进行调用,其实使用通常那种function a(){}创建也相当于创建了一个对象,对象名是函数名,不带参数。)
函数提升(Hoisting):JavaScript 默认将当前作用域提升到前面去的的行为。因此函数可以在声明之前调用。
自调用函数:函数表达式可以 "自调用",自调用表达式会自动调用,如果表达式后面紧跟 () ,则会自动调用。如:
(function () { var x = "Hello!!"; // 我将调用自己 })();
同样,自调用函数一般都是匿名函数,即便有名字,在外部也引用不了。
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
JavaScript 函数有 属性 和 方法。arguments.length 属性返回函数调用过程接收到的参数个数。JavaScript的函数参数数量是不固定的,在调用时可以传递很多个参数,声明时可以不声明很多参数。但是这样就只能使用arguments数组调用了。同时调用时也可以不传递全部参数,这样在使用没有传递参数时该参数会变为undefined类型。
函数定义作为对象的属性,称之为对象方法。函数如果用于创建新的对象,称之为对象的构造函数。函数对象.toString();把函数声明作为字符串返回。
接上:若函数有undefined时,避免方式为:设置一个默认值,默认值设置方式如下:y=y||0;
通过值传递参数:在函数中调用的参数是函数的参数。如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。函数参数的改变不会影响函数外部的变量(局部变量)。
通过对象传递参数:在JavaScript中,可以引用对象的值。因此我们在函数内部修改对象的属性就会修改其初始的值。修改对象属性可作用于函数外部(全局变量)。
函数的调用:JavaScript 函数有 4 种调用方式。每种方式的不同方式在于 this 的初始化。
一般而言,在Javascript中,this指向函数执行时的当前对象。(注意 this 是保留关键字,你不能修改 this 的值。)
使用function f(a){}方式创建的函数不属于任何对象,但是在 JavaScript 中它始终是默认的全局对象。在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。所以window.f与f调用是一样的。
全局对象:当函数没有被自身的对象调用时, this 的值就会变成全局对象。在 web 浏览器中全局对象是浏览器窗口(window 对象)。如:
function myFunction() { return this; } myFunction(); // 返回 window 对象
函数作为全局对象调用,会使 this 的值成为全局对象。使用 window 对象作为一个变量容易造成程序崩溃。
函数作为方法调用:
var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 返回 "John Doe"
作为对象myObject的一个方法来调用,其他对象不能调用该方法。函数作为对象方法调用,会使得 this 的值成为对象本身。
fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。
使用构造函数调用函数:如果函数调用前使用了 new 关键字, 则是调用了构造函数。
// 构造函数: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("John","Doe"); x.firstName; // 返回 "John"
若要令该对象有对象方法,则创建的方法也需要以对象形式存在,即匿名方法赋值给一个变量。而不能以通常的function f(){}方式来创建。
构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。构造函数中 this 关键字没有任何的值。this 的值在函数调用时实例化对象(new object)时创建。(在创建一个对象o之后可以使用o.newVar来动态创建对象的成员)。
PS:var f = function(){}与function f(){}的区别:两者一般情况下并没有区别,例如在当做对象创建时,可以使用第一种也可以使用第二种,最重要的区别在于对象内部的方法,必须使用第一种,即匿名函数赋值给变量的方式,第二种是无效的,会提示找不到该方法的声明。
使用函数方法调用函数:在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。call的参数使用多个参数传递,apply则是使用数组传递参数。语法:函数名.call([thisObj[,arg1[, arg2[, [,.argN]]]]]) ;把thisObj作为函数名中的this对象去调用。注意:使用的thisObj必须先创建,可以使用var thisObj=new Object()。
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
重要:JavaScript 闭包:
JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。但是如果要实现其他语言中的静态变量,或者想在外部获取一个局部变量的值应该怎么办呢?可以使用闭包来实现。
先看一个计数器的例子:
var counter = 0; function add() { counter += 1; } add(); add(); add(); // 计数器现在为 3 function add() { var counter = 0; counter += 1; } add(); add(); add(); // 本意是想输出 3, 但事与愿违,输出的都是 1 !
第一个例子,计数器数值在执行 add() 函数时发生变化。但问题来了,页面上的任何脚本都能改变计数器,即便没有调用 add() 函数。如果我在函数内声明计数器,如果没有调用函数将无法修改计数器的值。第二个例子,无法正确输出,每次调用 add() 函数,计数器都会设置为 1。
JavaScript 内嵌函数可以解决此问题:
function add() { var counter = 0; function plus() {counter += 1;} plus(); return counter; }
实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量。这样每次调用plus()计数器都会加一,问题是在外部如何调用内部的plus函数呢,第一个解决方案是使用对象模型,但是较为复杂,第二种方法就是使用闭包。
var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add();
看起来很神奇有木有?动态语言就是这么不可思议。巧妙运用了函数的自调用,通过把返回值设置为一个函数对象,再自调用外部函数,把内部函数返回给了add对象。通过add对象调用了内部函数,从而对内部变量进行修改并返回值。
变量 add 指定了函数自我调用的返回字值。自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护,只能通过 add 方法修改。闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
三、一些特殊的运算符与函数
==转换为相同类型再做比较,===不转换直接做比较,类型不同为false,!=转换为相同类型再比较,不相等为true,!==不转换即比较,类型不同直接返回true。^异或,<<左移位,>>右移位。Infinity或-Infinity,代表正负无穷大。NaN代表不是数字。undefined代表变量未声明值。null用来清空变量值,一个变量被赋值为null之后则为null。重新声明变量不会使变量值变为undefined,他会保留上次的值。
关于不同类型比较的一些特殊情况:
表达式 | null == undefined | "NaN" == NaN | 5 == NaN | NaN == NaN | NaN != NaN | false == 0 | true == 1 | true == 2 | undefined == 0 | null == 0 | "5" == 5 |
值 | TRUE | FALSE | FALSE | FALSE | TRUE | TRUE | TRUE | FALSE | FALSE | FALSE | TRUE |
typeof用于返回某个变量的类型,有以下几种:
数字型包括NaN及Infinity等特殊的数字,都返回number。
对于字符串类型, typeof 返回的值是 string。比如typeof("123")返回的值是string。
对于布尔类型, typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
对于对象、数组、null 返回的值是 object 。注意这里的null返回的是object类型,这是一个bug,现在已被接受。
对于函数类型,返回的值是 function。
如果运算数是没有定义的(比如说不存在的变量、函数或者undefined),将返回undefined。
特殊的一元运算符:
1、delete 运算符删除对以前定义的对象属性或方法的引用,如果再取原引用值会变为undefined。没有返回值的函数返回的其实都是undefined。
2、void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值,例如,从 HTML 的 <a> 元素调用 JavaScript 函数时。要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果。href="#"与href="javascript:void(0)"不同,第一个是转到指定的id,第二个是淡出的死链接,只为了执行void中的函数。href="#"的默认锚为#top。
3、一元加法和一元减法,a=+1,a=-1.他们的特殊之处在于会把字符串转换为数值型。与parseInt不同在于对八进制数的理解上,parseInt可以正确理解八进制数,而一元加法则不能理解。
四、全局函数
函数 | 描述 |
---|---|
decodeURI() | 解码某个编码的 URI。 |
decodeURIComponent() | 解码一个编码的 URI 组件。 |
encodeURI() | 把字符串编码为 URI。 |
encodeURIComponent() | 把字符串编码为 URI 组件。 |
escape() | 对字符串进行编码。 |
eval() | 计算 JavaScript 字符串,并把它作为脚本代码来执行。 |
getClass() | 返回一个 JavaObject 的 JavaClass。 |
isFinite() | 检查某个值是否为有穷大的数。 |
isNaN() | 检查某个值是否是数字。 |
Number() | 把对象的值转换为数字。 |
parseFloat() | 解析一个字符串并返回一个浮点数。 |
parseInt() | 解析一个字符串并返回一个整数。 |
String() | 把对象的值转换为字符串。 |
unescape() | 对由 escape() 编码的字符串进行解码。 |
关于全局对象:
全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性,所以它没有名称。
在顶层 JavaScript 代码中,可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象,因为全局对象是作用域链的头,这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如,当JavaScript 代码引用 parseInt() 函数时,它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头,还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。
全局对象只是一个对象,而不是类。既没有构造函数,也无法实例化一个新的全局对象。
在 JavaScript 代码嵌入一个特殊环境中时,全局对象通常具有环境特定的属性。实际上,ECMAScript 标准没有规定全局对象的类型,JavaScript 的实现或嵌入的 JavaScript 都可以把任意类型的对象作为全局对象,只要该对象定义了这里列出的基本属性和函数。例如,在允许通过 LiveConnect 或相关的技术来脚本化 Java 的 JavaScript 实现中,全局对象被赋予了这里列出的 java 和 Package 属性以及 getClass() 方法。而在客户端 JavaScript 中,全局对象就是 Window 对象,表示允许 JavaScript 代码的 Web 浏览器窗口。
在 JavaScript 核心语言中,全局对象的预定义属性都是不可枚举的,所有可以用 for/in 循环列出所有隐式或显式声明的全局变量,代码如下:
<html> <body> <script type="text/javascript"> var variables = ""; for (var name in this) { variables += name + "<br />"; } document.write(variables); </script> </body> </html>
五、DOM对象
动态添加事件,可以使用getElementById("ID").事件名="function"来实现,也可以使用getElementById("ID").addEventListener("去掉on的事件名", 函数对象);(不能有参数)来实现。此方法可以添加多个相同的事件到同一个元素。若要实现传递参数,则需要使用匿名函数,如addEventListener("click", function() {myFunction(c1,c2);})的形式。语法addEventListener(event, function, useCapture);其中最后一个参数是设置触发方式的,有冒泡(从内层元素开始触发事件)与捕获(从外层元素开始触发事件)两种,默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。使用removeEventListener(event, function)来删除事件,注意,function一定要使用相同的函数对象。IE8为attachEvent()与detachEvent()。
1、document对象中所有方法与属性:
document.addEventListener() | 向文档添加句柄 |
document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
document.anchors | 返回对文档中所有 Anchor 对象的引用。 |
document.applets | 返回对文档中所有 Applet 对象的引用。 |
document.baseURI | 返回文档的绝对基础 URI |
document.body | 返回文档的body元素 |
document.close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
document.createAttribute() | 创建一个属性节点 |
document.createComment() | createComment() 方法可创建注释节点。 |
document.createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
document.createElement() | 创建元素节点。 |
document.createTextNode() | 创建文本节点。 |
document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
document.documentElement | 返回文档的根节点 |
document.documentMode | 返回用于通过浏览器渲染文档的模式 |
document.documentURI | 设置或返回文档的位置 |
document.domain | 返回当前文档的域名。 |
document.domConfig | 返回normalizeDocument()被调用时所使用的配置 |
document.embeds | 返回文档中所有嵌入的内容(embed)集合 |
document.forms | 返回对文档中所有 Form 对象引用。 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.images | 返回对文档中所有 Image 对象引用。 |
document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
document.inputEncoding | 返回用于文档的编码方式(在解析时)。 |
document.lastModified | 返回文档被最后修改的日期和时间。 |
document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
document.normalize() | 删除空文本节点,并连接相邻节点 |
document.normalizeDocument() | 删除空文本节点,并连接相邻节点的 |
document.open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.readyState | 返回文档状态 (载入中……) |
document.referrer | 返回载入当前文档的文档的 URL。 |
document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
document.renameNode() | 重命名元素或者属性节点。 |
document.scripts | 返回页面中所有脚本的集合。 |
document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
document.title | 返回当前文档的标题。 |
document.URL | 返回文档完整的URL |
document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
document.writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
注意:在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。很多属性和方法在文档中是没有意义的。HTML 文档对象可以避免使用这些节点对象和属性:
属性 / 方法 | 避免的原因 |
---|---|
document.attributes | 文档没有该属性 |
document.hasAttributes() | 文档没有该属性 |
document.nextSibling | 文档没有下一节点 |
document.nodeName | 这个通常是 #document |
document.nodeType | 这个通常是 9(DOCUMENT_NODE) |
document.nodeValue | 文档没有一个节点值 |
document.ownerDocument | 文档没有主文档 |
document.ownerElement | 文档没有自己的节点 |
document.parentNode | 文档没有父节点 |
document.previousSibling | 文档没有兄弟节点 |
document.textContent | 文档没有文本节点 |
2、元素节点的方法与属性
element.accessKey | 设置或返回accesskey一个元素 |
element.addEventListener() | 向指定元素添加事件句柄 |
element.appendChild() | 为元素添加一个新的子元素 |
element.attributes | 返回一个元素的属性数组 |
element.childNodes | 返回元素的一个子节点的数组 |
element.className | 设置或返回元素的class属性 |
element.clientHeight | 在页面上返回内容的可视高度(不包括边框,边距或滚动条) |
element.clientWidth | 在页面上返回内容的可视宽度(不包括边框,边距或滚动条) |
element.cloneNode() | 克隆某个元素 |
element.compareDocumentPosition() | 比较两个元素的文档位置。 |
element.contentEditable | 设置或返回元素的内容是否可编辑 |
element.dir | 设置或返回一个元素中的文本方向 |
element.firstChild | 返回元素的第一个子节点 |
element.getAttribute() | 返回指定元素的属性值 |
element.getAttributeNode() | 返回指定属性节点 |
element.getElementsByTagName() | 返回指定标签名的所有子元素集合。 |
element.getFeature() | 返回指定特征的执行APIs对象。 |
element.getUserData() | 返回一个元素中关联键值的对象。 |
element.hasAttribute() | 如果元素中存在指定的属性返回 true,否则返回false。 |
element.hasAttributes() | 如果元素有任何属性返回ture,否则返回false。 |
element.hasChildNodes() | 返回一个元素是否具有任何子元素 |
element.id | 设置或者返回元素的 id。 |
element.innerHTML | 设置或者返回元素的内容。 |
element.insertBefore() | 现有的子元素之前插入一个新的子元素 |
element.isContentEditable | 如果元素内容可编辑返回 true,否则返回false |
element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true,否则返回 false。 |
element.isEqualNode() | 检查两个元素是否相等 |
element.isSameNode() | 检查两个元素所有有相同节点。 |
element.isSupported() | 如果在元素中支持指定特征返回 true。 |
element.lang | 设置或者返回一个元素的语言。 |
element.lastChild | 返回的最后一个子元素 |
element.namespaceURI | 返回命名空间的 URI。 |
element.nextSibling | 返回该元素紧跟的一个元素 |
element.nodeName | 返回元素的标记名(大写) |
element.nodeType | Returns the node type of an element |
element.nodeValue | 返回元素的类型 |
element.normalize() | 使得此成为一个"normal"的形式,其中只有结构(如元素,注释,处理指令,CDATA节和实体引用)隔开Text节点,即元素(包括属性)下面的所有文本节点,既没有相邻的文本节点也没有空的文本节点 |
element.offsetHeight | 返回,任何一个元素的高度包括边框和填充,但不是边距 |
element.offsetWidth | 返回元素的宽度,包括边框和填充,但不是边距 |
element.offsetLeft | 返回当前元素的相对水平偏移位置的偏移容器 |
element.offsetParent | 返回元素的偏移容器 |
element.offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 |
element.ownerDocument | 返回元素的根元素(文档对象) |
element.parentNode | 返回元素的父节点 |
element.previousSibling | 返回某个元素紧接之前元素 |
element.querySelector() | 返回匹配指定 CSS 选择器元素的第一个子元素 |
document.querySelectorAll() | 返回匹配指定 CSS 选择器元素的所有子元素节点列表 |
element.removeAttribute() | 从元素中删除指定的属性 |
element.removeAttributeNode() | 删除指定属性节点并返回移除后的节点。 |
element.removeChild() | 删除一个子元素 |
element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
element.replaceChild() | 替换一个子元素 |
element.scrollHeight | 返回整个元素的高度(包括带滚动条的隐蔽的地方) |
element.scrollLeft | 返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
element.scrollTop | 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
element.scrollWidth | 返回元素的整个宽度(包括带滚动条的隐蔽的地方) |
element.setAttribute() | 设置或者改变指定属性并指定值。 |
element.setAttributeNode() | 设置或者改变指定属性节点。 |
element.setIdAttribute() | |
element.setIdAttributeNode() | |
element.setUserData() | 在元素中为指定键值关联对象。 |
element.style | 设置或返回元素的样式属性 |
element.tabIndex | 设置或返回元素的标签顺序。 |
element.tagName | 作为一个字符串返回某个元素的标记名(大写) |
element.textContent | 设置或返回一个节点和它的文本内容 |
element.title | 设置或返回元素的title属性 |
element.toString() | 一个元素转换成字符串 |
nodelist.item() | 返回某个元素基于文档树的索引 |
nodelist.length | 返回节点列表的节点数目。 |
3、Attr 对象与NamedNodeMap 对象
表示一个无顺序的节点列表。通过节点名称来访问 NamedNodeMap 中的节点。多用于获取元素的属性。
属性 / 方法 | 描述 |
---|---|
attr.isId | Returns true if the attribute is of type Id, otherwise it returns false |
attr.name | 返回属性名称 |
attr.value | 设置或者返回属性值 |
attr.specified | 如果属性被指定返回 true ,否则返回 false |
nodemap.getNamedItem() | 从节点列表中返回的指定属性节点。Returns a specified attribute node from a NamedNodeMap. |
nodemap.item() | 返回节点列表中处于指定索引号的节点。 |
nodemap.length | 返回节点列表的节点数目。 |
nodemap.removeNamedItem() | 删除指定属性节点 |
nodemap.setNamedItem() | 设置指定属性节点(通过名称) |
Attr (属性) 对象继承节点对象的所有属性和方法 。在属性对象中你需要避免使用节点对象属性和方法:
属性 / 方法 | 避免原因 |
---|---|
attr.appendChild() | 属性没有子节点 |
attr.attributes | 属性没有属性 |
attr.baseURI | 使用 document.baseURI 替代 |
attr.childNodes | 属性没有子节点 |
attr.cloneNode() | 使用 attr.value 替代 |
attr.firstChild | 属性没有子节点 |
attr.hasAttributes() | 属性没有属性Attributes don't have attributes |
attr.hasChildNodes | 属性没有子节点Attributes don't have child nodes |
attr.insertBefore() | 属性没有子节点 |
attr.isEqualNode() | 没有意义 |
attr.isSameNode() | 没有意义 |
attr.isSupported() | 通常为 true |
attr.lastChild | 属性没有子节点 |
attr.nextSibling | 属性没有兄弟节点 |
attr.nodeName | 使用 attr.name 替代 |
attr.nodeType | 通常为 2 (ATTRIBUTE-NODE) |
attr.nodeValue | 使用 attr.value 替代 |
attr.normalize() | 属性没有规范 |
attr.ownerDocument | 通常为你的 HTML 文档 |
attr.ownerElement | 你用来访问属性的 HTML 元素 |
attr.parentNode | 你用来访问属性的 HTML 元素 |
attr.previousSibling | 属性没有兄弟节点 |
attr.removeChild | 属性没有子节点 |
attr.replaceChild | 属性没有子节点 |
attr.textContent | 使用 attr.value 替代 |
4、事件对象
相关内容参考html章节或者dom事件。
补充内容:JavaScript主动触发事件:
function dispatch(el, type){ try{ var evt = document.createEvent('Event'); evt.initEvent(type,true,true); el.dispatchEvent(evt); }catch(e){ alert(e); }; } var btn1 = document.getElementById('btn1'); dispatch(btn1, 'click');
跨浏览器示例:
var fireEvent = function(element,event){ if (document.createEventObject){ // IE浏览器支持fireEvent方法 var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else{ // 其他标准浏览器使用dispatchEvent方法 var evt = document.createEvent( 'HTMLEvents' ); // initEvent接受3个参数: // 事件类型,是否冒泡,是否阻止浏览器的默认行为 evt.initEvent(event, true, true); return !element.dispatchEvent(evt); } };
对于jQuery库,可以使用trigger来触发事件。