学习笔记-js-2017.2.24

JS HTML DOM

一、HTML DOM (文档对象模型)

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1、通过 id 查找 HTML 元素

<p id="demo">你好世界</p>
<script type="text/javascript">
    x=document.getElementById("demo");
    document.write("<p>文本来自id为demo段落"+x.innerHTML+"</p>");
</script>

2、通过标签名查找 HTML 元素

<div id="demo">
    <p>123</p>
</div>
<script type="text/javascript">
    var x=document.getElementById("demo");
    var y=x.getElementsByTagName("p");
    document.write(y[0].innerHTML);
</script>

3、通过类名找到 HTML 元素

<p class="demo">123</p>
<script type="text/javascript">
    var x=document.getElementsByClassName("demo")
    document.write(x[0].innerHTML);
</script>

二、改变 HTML

1、改变 HTML 输出流

<script type="text/javascript">
    document.write(Date());
</script>

2、改变 HTML 内容

<p id="demo">123</p>
<script type="text/javascript">
    document.getElementById("demo").innerHTML="456";
</script>

3、改变 HTML 属性

<img src="images/1.jpg" width="160" height="120" id="image">
<script type="text/javascript">
    document.getElementById("image").src="images/2.jpg";
</script>

三、HTML DOM - 改变CSS

1、语法

document.getElementById(id).style.property=新样式

<p id="demo1">123</p>
<P id="demo2">123</P>
<script type="text/javascript">
    document.getElementById("demo2").style.color="blue";
    document.getElementById("demo2").style.fontWeight="bold";
    document.getElementById("demo2").style.fontSize="larger";
</script>

2、通过触发事件来执行代码。

<h1 id="demo">123</h1>
<button type="button" onclick="document.getElementById('demo').style.color='red'">点击</button>

四、HTML DOM 事件

1、在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码。

<h1 onclick="changetext(this)">surprise</h1>
<script type="text/javascript">
    function changetext(id){
        id.innerHTML="i love you";
    }
</script>

2、从事件处理器调用一个函数：

<h1 onclick="this.innerHTML='i love you'">surprise</h1>

3、使用 HTML DOM 来分配事件

<button onclick="display()">点击</button>
    <script type="text/javascript">
        function display(){
        document.getElementById("demo").innerHTML=Date();
    }
    </script>
    <P id="demo"></P>

4、onload 和 onunload 事件

<body onload="checkCookies()">
<script type="text/javascript">
    function checkCookies(){
        if(navigator.cookieEnabled==true){
            alert("Cookies可用")
        }
        else{
            alert("Cookies不可用")
        }
    }
</script>
</body>

5、onchange 事件

<body onload="checkCookies()">
<script type="text/javascript">
    function checkCookies(){
        if(navigator.cookieEnabled==true)
        {
            alert("以启用cookie")
        }
        else{
            alert("未启用cookie")
        }
    }
</script>
</body>

6、onmouseover 和 onmouseout 事件

<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面
</div>
<script type="text/javascript">
    function mOver(obj){
        obj.innerHTML="谢谢"
    }
    function mOut(obj){
        obj.innerHTML="把鼠标移到上面"
    }
</script>

7、onmousedown、onmouseup 以及 onclick 事件

<div onmousedown="mOver(this)" onmouseup="mOut(this)">把鼠标移到上面
</div>
<script type="text/javascript">
    function mOver(obj){
        obj.innerHTML="谢谢"
    }
    function mOut(obj){
        obj.innerHTML="把鼠标移到上面"
    }
</script>

8、onfocus

    <input type="text" onfocus="myFunction(this)" name="">
    <script type="text/javascript">
        function myFunction(x)
        {
            x.style.background="red";
        }
    </script>

五、HTML DOM EventListener

1、addEventListener() 方法

<button id="Btn">点击</button>
<p id="demo"></p>
<script type="text/javascript">
    document.getElementById("Btn").addEventListener("click",displayDate);
    function displayDate(){
        document.getElementById("demo").innerHTML=Date();
    }
</script>

2、语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

3、向原元素添加事件句柄

<button id="myBtn">点击</button>
    <script type="text/javascript">
        document.getElementById("myBtn").addEventListener("click",myFunction);
        function myFunction(){
            alert("hello world");
        }
    </script>

4、向同一个元素中添加多个事件句柄

<button id="myBtn">这是我想说的话</button>
    <script type="text/javascript">
        var x=document.getElementById("myBtn");
        x.addEventListener("click",a);
        x.addEventListener("click",b);
        x.addEventListener("click",c);
        function a(){
            alert("老王")
        }
        function b(){
            alert("好朋友！")
        }
        function c(){
            alert("一辈子！")
        }
    </script>

5、传递参数

<button id="myBtn">点击</button>
<p id="demo"></p>
<script type="text/javascript">
    var p1=5;
    var p2=7;
    document.getElementById("myBtn").addEventListener("click",function(){
        myFunction(p1,p2);
    });
    function myFunction(a,b){
        var result=a*b;
        document.getElementById("demo").innerHTML=result;
    }
</script>