JavaScript DOM对象

一，操作html

1.改变html的元素  

2.改变html的属性

3.改变所有的html的CSS样式

4.对页面的所有事件作出反应





<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p  id="hello">Hello  World!!!!</p>
        <p id="hey">hahhahahahah</p>
        
    
    <input type="button"  onclick="domdemo()" value="点击"/>
    <button onclick="domdemo2()">变标签</button>
        <script>
            function  domdemo(){
                document.getElementById("hello").innerHTML="卧槽！！";
                //通过id的方法改变html元素的内容
            }
            
            function   domdemo1(){
                //改变了html元素的样式的属性
                document.getElementById("peace").style.color="green";
                
            }
            function domdemo2(){
                
                document.getElementsByTagName("h1").innerHTML="What  up??man";
                //通过获取标签的名字来改变，
                //如果有两个一样的标签的话，那么他只能改变第一个标签
            }
            
            function  domdemo3(){
                document.getElementById("img").src="img/3.jpg";
            }
        
        </script>
        <h1 id="peace"  style="color: red;">世界和平！！！</h1>
        <button onclick="domdemo1()" >变身</button>
        <br /><br />
        <img src="img/img3.jpg"   id="img"/>
        <br />
        <button   onclick="domdemo3()">变大</button>
        <button id="dianji" >点击事件</button>
        <script>
            //通过id给按钮注册事件
            //这里需要注意的是addEvenListener的参数， 第一个是事件的类型，第二个函数的名称
            //这里的函数名称不需要括号
            document.getElementById("dianji").addEventListener("click",demo);
            function  demo(){
                
                alert("伙计~  你点击了我呢~");
            }
        </script>
    </body>
</html>






 


 




 二，创建对象的几种不同的方法




    <script>//方法一：使用new 一个object的对象 ，。然后赋值
            people=new Object();
            people.name="郑伟钊";
            people.age="22";
            document.write("name:"+people.name+"______age:"+people.age);
    
        </script>
        <br />
        <script>//方法2：使用大括号方法，直接在里面赋对象的值
            people1={name:"吴彦祖",age:"30"};//注意这里使用的是冒号
            document.write("name:"+people1.name+"____age:"+people1.age);
        </script>
        <br />
        <script>
            function people2(name,age)//方法3：利用new一个方法，创建这个方法的对象，在引用参数的使用记得使用"this."来对参数进行索引

            {
                this. _name=name;//这里需要用this来进行参数的索引，
                this._age=age;    //后面还有一个点    .
            }
            son=new people2("周杰伦","35");
            document.write("name:"+son._name+"____age:"+son._age);
        </script>




 


三，DOM对象控制HTML的相关的函数


    方法如下：


           getElementsByName()   :获取name


           getElementsTagName()   :获取元素


           getAttribute() ：获取元素的属性


          setAttribute()   :设置元素的属性


           childNodes()  :访问子节点


          parentNode()  :访问父节点


          createElement ()  :创建父元素节点


          createTextNode()  :创建文本节点


       i   nsertBefore()  :插入节点


          removeChild()   :删除节点


           offsetHeight()  ：网页尺寸


           scrollHeight()    :网页尺寸


 






            

            
posted @ 
2017-03-10 21:33 
阿鸠 
阅读(228) 
评论(0) 
 
收藏 
举报