Document Object Modern（文档对象模型）

DOM对象 (将html的元素转成的JS对象)

Eg:如果用js操作html文档，先要将html转成js DOM对象

<a href="www.sina.com” id=”link” title=”新浪”>新浪

Var obj =document.getElementById(“ link”); //获取dom对象

1. 操作属性

DOM自带的属性如<a href=”” title=”” target=”_blank” id=”link”> link

例1

         <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
    <style type="text/css">
        .link{
            text-decoration: none;
            font-size: 36px;
            color: red;
        }
    </style>
    <script>
        window.onload = function(){
            var linkObj = document.getElementById("link");
            //改变dom属性
            linkObj.href = "http://www.baidu.com";
            linkObj.title = "baidu";
            linkObj.innerHTML = "百度";
            linkObj.className = "link";
            console.log(linkObj.href,linkObj.title,linkObj.innerHTML);
        }
    </script>
</head>
<body>
    <a href="http://www.sohu.com" title="sohu" id="link">搜狐</a>
</body>
</html>

操作前

操作后

例2

                                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
    <style>
        img{
            cursor: pointer;
        }
    </style>
    <script>
        function horse(){//onmouseover  鼠标经过
            var picObj = document.getElementById("pic");
            picObj.src = "img/horse.jpg"
        }
        function dog(){//onmouseout  鼠标滑离
            var picObj = document.getElementById("pic");
            picObj.src = "img/dog.jpg"
        }
    </script>
</head>
<body>
    <img src="img/dog.jpg" onmouseover="horse()" onmouseout="dog()" id="pic" />
</body>
</html>

操作前

操作后（鼠标经过）

例3

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
    <style>
        img{
            cursor: pointer;
        }
    </style>
    <script>
        function change(R){//onmouseover  鼠标经过
            var picObj = document.getElementById("pic");
            if(R=='horse'){
                picObj.src = "img/horse.jpg";
            }else if(R=='dog'){
                picObj.src = "img/dog.jpg";
            }else{
                picObj.src = "img/monkey.jpg";
            }
            
        }
    </script>
</head>
<body>
    <img src="img/dog.jpg" 
        onmouseover="change('horse')"
        onmouseout="change('dog')"  
        onclick="change('monkey')"
        id="pic"/>
</body>
</html>

例4

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
    <style>
        img{
            cursor: pointer;
            display: block;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 1px solid #ccc;
        }
    </style>
    <script>
        window.onload=function(){
            var arr = ["img/bear.jpg","img/cat.jpg","img/dog.jpg","img/fox.jpg","img/horse.jpg",
            "img/house.jpg","img/monkey.jpg"];
            var picObj = document.getElementById("pic");
            picObj.src = arr[0];
            picObj.onclick=function(){
                var num = Math.floor(Math.random()*7);//随机数
                console.log(num);
                picObj.src = arr[num];
            }
        }
    </script>
</head>
<body>
    <img src="" id="pic" alt="动物即将出没！" />
</body>
</html>

操作前

操作后（鼠标点击随机切换图片）

2. 操作内容

InnerText:操作内部的文本，任何标签只当做文本处理

兼容性:innerText(IE) textContent(FF)[兼容IE低版本的浏览器]

InnerHTML ( 兼容性好) ：可带标签格式

兼容性：可同时兼容IE与FF

outerHTML取文本元素外围的标签

1.innerHTML与innerText的区别

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML与innerText的区别</title>
</head>
<body>
    <div id="box">
        我是原来的文字
    </div>
    <script>
        var boxObj = document.getElementById("box");//dom
        boxObj.onmouseover=function(){//innerHTML可带标签格式
            this.innerHTML="<font color='red'><b>我是鼠标经过后的文件</b></font>";
        }
        boxObj.onmouseout=function(){//innerText InnerText：操作内部的文本，任何标签只当做文本处理
            this.innerText="我是原来的文字";
        }
    </script>
</body>
</html>

2.outerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>outerHTML</title>
</head>
<body>
    <div id="box">
        <sapn id="myspan">
            <p>我是span的内容</p>
        </sapn>
    </div>
    <script>
        var myspanObj = document.getElementById("myspan");//dom
        console.log(myspanObj.innerHTML);
        console.log(myspanObj.outerHTML);
        myspanObj.outerHTML="<article id='newart'><article>";
        document.getElementById("newart").innerHTML="<b>修改过后的span的内容</b>";
    </script>
</body>
</html>

3.innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p,img{width:300px; height:300px;}
			p{border:1px solid #333; margin:100px auto; background-color:white;}
		</style>
		<script>
			window.onload=function(){
				var pObj = document.getElementById("pic");
				pObj.innerHTML = "<img src='img/horse.jpg' id='tu'/>";
				var tuObj = document.getElementById("tu");
				tuObj.onmouseover = function(){
					this.src='img/dog.jpg'
				} 
				tuObj.onmouseout = function(){
					this.src = 'img/horse.jpg'
				} 
			}
		</script>
	</head>
	<body>
		<p id="pic">
			
		</p>
	</body>
</html>

操作表单值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="reg">
        <p>
            <label>用户名:</label>
            <input type="text" name="user"/>
        </p>
        <p>
            <label>密码:</label>
            <input type="password" name="password" />
        </p>
        <p>
            <label>密码问题:</label>
            <input type="text" name="question" />
        </p>
        <p>
            <label>密码答案:</label>
            <input type="text"  name="answer"/>
        </p>
        <p>
            <input type="button" value="提交" onclick="show()"/>
        </p>
    </form>
</body>
<script>
    //获取
    function show(){
        // 1.var answer = document.reg.answer.value; //表单递进式寻址
        // 2.var answer = document.forms[0].answer.value;
        var answer = document.getElementsByTagName("input")[3].value;
        console.log(answer);
    }
</script>
</html>

CSS样式

例一方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .pic{
            position: relative;
            width: 400px;
            height: 260px;
            margin: 50px auto 5px auto;
            border: 1px solid #ccc;
        }
        .pic img{
            width: 400px;
            height: 260px;
        }
        .pic .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 260px;
            background: #000; opacity: .8;
        }
        .btn{
            width: 400px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #666;
            margin: 0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="pic" class="pic">
        <p id="mask" class="mask"></p>
        <img src="img/house.jpg" alt="">
    </div>
    <div id="btn" class="btn" onclick="change()">开</div>
    <script>
        function change(){
            var maskObj = document.getElementById("mask");
            var btnObj = document.getElementById("btn");
            var num = 0;//计数器
            btnObj.onclick=function(){
                num++;
                if(num%2==1){
                    console.log(num);
                    maskObj.style.opacity = "0";
                    this.innerHTML = "关";
                }else{
                    console.log(num);
                    maskObj.style.opacity = ".8";
                    this.innerHTML = "开";
                }
            }
        }
    </script>
</body>
</html>

方法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .pic{
            position: relative;
            width: 400px;
            height: 260px;
            margin: 50px auto 5px auto;
            border: 1px solid #ccc;
        }
        .pic img{
            width: 400px;
            height: 260px;
        }
        .pic .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 260px;
            background: #000; opacity: 0.8;
        }
        .btn{
            width: 400px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #666;
            margin: 0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="pic" class="pic">
        <p id="mask" class="mask"></p>
        <img src="img/house.jpg" alt="">
    </div>
    <div id="btn" class="btn" onclick="change()">开</div>
    <script>
        function change(){
            var maskObj = document.getElementById("mask");
            var btnObj = document.getElementById("btn");
            btnObj.onclick=function(){
                if(maskObj.style.opacity=="0.8"){
                    maskObj.style.opacity = "0";
                    this.innerHTML = "关";
                }else{
                    maskObj.style.opacity = ".8";
                    this.innerHTML = "开";
                }
            }
        }
    </script>
</body>
</html>

（此图为以上运行效果）

例二

方法1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            line-height: 21px;
            font-size: 14px;
            margin: 10px auto;
        }
        .box p{
            text-indent: 28px;
        }
        #btn{
            width: 600px;
            height: 30px;
            cursor: pointer;
        }
        .box p#two{
            display: none;
        }
        .up{
            background: url(img/up.gif) center 2px no-repeat;
        }
        .down{
            background: url(img/down.gif) center 2px no-repeat;
        }
    </style>
</head>
<body>
    <div class="box">
        <p id="one">
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国     
        </p>
        <p id="two">
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国     
       </p>
        <p id="btn" class="up" onclick="change()"></p>  
    </div>
    <script>function change(){
        var twoObj = document.getElementById("two");
        var btnObj = document.getElementById("btn");
        var num = 0;
        btnObj.onclick = function(){
            num++;
            if(num%2==1){
                twoObj.style.display = "block"
                btnObj.className="up"
            }else{
                twoObj.style.display = "none"
                btnObj.className="down"
            }
        }
    }
            
    </script>
</body>
</html>

方法2


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            line-height: 21px;
            font-size: 14px;
            margin: 10px auto;
        }
        .box p{
            text-indent: 28px;
        }
        #btn{
            width: 600px;
            height: 30px;
            cursor: pointer;
        }
        .up{
            background: url(img/up.gif) center 2px no-repeat;
        }
        .down{
            background: url(img/down.gif) center 2px no-repeat;
        }
        .block{
            display: block;
        }
        .none{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <p id="one">
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国     
        </p>
        <p id="two" class="none">
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
            中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国     
       </p>
        <p id="btn" class="down" ></p>  
    </div>
    <script>
        var twoObj = document.getElementById("two");
        var btnObj = document.getElementById("btn");
        btnObj.onclick = function(){
            if(this.className=="down"){
                twoObj.className = "block"
                this.className="up"
            }else{
                twoObj.className = "none"
                this.className="down"
            }
        }
    
            
    </script>
</body>
</html>