JavaScriptday02(dom访问元素，内置对象，DOM，JS对象)

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     }