dom访问元素
getElementById
通过id名称获取到对应的元素对象。
document.getElementById(“id名称”) ;
会获取到对应的节点对象。可以调用对象中的属性。
getElementsByName
通过该种方式，能够获取到所有相同名称(name)的节点对象，因此会返回一个节点集合。
document.getElementsByName(name名称)
getElementsByTagName
根据标签名称获取到对应节点对象集合。
document.getElementsByTagName(“标签名称”)
getElementsByClassName
根据class类名获取到对应节点对象集合。
document.getElementsByClassName(“标签名称”)
内置对象
Array
String
Math
Date
Date日期类型对象
getFullYear() : 返回一个4位年份
getMonth() : 返回月份(0~11)
getDate() : 返回一个月中的第几天(1~31)’
getHours(): 返回现在的小时
getMinutes() : 返回分钟数
getSeconds() : 返回秒
Array数组类型对象
sort() 对数组进行排序
join(分隔符) 对数组中的值使用分隔符合并成一个字符串
push(数值) 向数组中末尾添加数值
Math数学类型对象
String字符串类型对象
与Java中相似
setTimeOutsetInterval
setTimeout: 在规定时间之后，运行一次对应的函数就会结束。
setInterval: 在规定的时间后，开始循环执行对应函数。
clearIntervalclearTimeout
能够将对应的interval或者timeout进行清除
clearInterval(interval对象)
DOM
在整个html中，全部都是dom节点。html自身就是一个文档。<html>标签就是文档的根节点。
DOM节点分类
节点属性
在节点属性中，能够获取到所有节点(包括空文本节点).
元素属性(Element)
如果遇到兼容性问题，可以采用以下方式解决:
节点信息
操作节点
- 操作节点的属性
getAttribute(“属性名”):获取属性值
setAttribute(“属性名”，“属性值”):设置属性
- 创建和插入节点
createElement(“节点名称”)：创建一个节点对象
A.appendChild(B): 向A节点中插入一个B的子节点
insertBefore( A,B ): 将A节点插入到B节点之前 使用父节点调用
cloneNode():拷贝节点对象
- 删除和替换节点
removeChild(节点):要删除哪一个对应的节点
remove() : 直接删除对应的节点
replace(newNode,oldNode):使用新节点替换掉老节点
- 操作节点样式
第一种形式：
节点.style.fontSize=”16px” 在最后的样式名称部分，需要去除样式中”-”,将后续的单词首字母大写
第二种形式：
节点.className = “类”
- 获取元素的样式
节点.style.fontSize:获取到对应样式的值。
JavaScript对象
内置对象
ArrayDateStringMath …
自定义对象
//1)使用new Object方式创建 var person = new Object() ; person.属性名 = 值; person.方法名 = function() { } //2)通过”json”对象形式 var person = { “属性名” : 值 , “属性名” : 值 , “属性名” : [{},{},{}], “方法名” : function() { } }
每一个大括号，就代表一个对象。每一个[]代表一个数组。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 1. json格式 var person = { name : "小明", age : 38, job : '中国内地男演员、歌手', address : '中国北京海淀区', intro :function () { document.writeln('姓名：' + this.name + '<br / >' + '年龄：' + this.age + '<br/ >' + '工作：' + this.job + '<br/>' + '地址：' + this.address) } } person.intro() // 2. new Object格式 var person = new Object(); person.name = '小明'; person.age = 38; person.job = '中国内地男演员、歌手'; person.address = '中国北京海淀区'; person.intro = function () { document.writeln('姓名：' + this.name + '<br / >' + '年龄：' + this.age + '<br/ >' + '工作：' + this.job + '<br/>' + '地址：' + this.address) } person.intro() </script> </head> <body> </body> </html>
构造方法constrator
function xx(参数1,参数2,参数n…){ this.属性名 = 参数； }
// 构造方法
function Person(userName, pwd) {
this.username = userName;
this.pwd = pwd;
function getUsername() {
return this.username;
}
}
// 使用构造方法new对象
var son = new Person('张三','123456');
prototype
javascript中的原型指的就是一个原型链，对象可以通过原型链构建对应的属性和方法，在特殊情况下，能够实现继承并且重写某个对象下的方法。
1 // 原型方法 属性 2 Person.prototype.sex = '男'; 3 Person.prototype.check = function (userName, pwd) { 4 if (userName == '张三' && pwd == '123456') { 5 alert("登录成功") 6 }else{ 7 alert("登录失败") 8 } 9 }; 10 11 // 在页面中显示原型对象的属性值 12 function showPrototype() { 13 document.writeln(son.sex) 14 }