DOM的概念和作用以及简单案列

一.js的三个部分

1.ECMAscript js的基本语法。
2.DOM 文档对象模型，操作的是页面的元素。
3.BOM 浏览器对象模型，操作的是浏览器。

文档：

html文件，由于万物皆对象，这个文档也可以看成是对象
页面中的每一个标签都是元素
节点（node）：页面中的所有内容都是节点，标签文本属性
根节点（root）：html
由文档中所有的元素组成的树形结构图，叫DOM树

案例

1.点击按钮显示图片
静态页面部分

<body>
<button id="btn">点击</button>
<img src="" alt="" id="pic">
</body>

js部分

<script>
    //根据ID来获取元素按钮
    document.getElementById("btn");
    //为按钮添加单击事件，添加时间的处理函数
    btn.onclick=function () {
        //根据ID获取元素
        var img=document.getElementById("pic");
        img.src="images/1.jpg";
    }
</script>

2.排插功能
静态页面

<body>
<button>我要变红</button>
<button>我要变红</button>
<button>我要变红</button>
<button>我要变红</button>
<button>我要变红</button>
<button>我要变红</button>
<button>我要变红</button>
<button>我要变红</button>
</body>

js部分

<script>
//通过标签名来获取所有的button标签
    var bunObj=document.getElementsByTagName("button");    
    for (var i=0 ; i<bunObj.length;i++){
    //给每一个button添加事件
       bunObj[i].onclick=function () {
           for (var i=0;i<bunObj.length;i++){
           //将之前改变了的文本值的button改变回来
               bunObj[i].innerText="我要变红";
           }
           //改变当前被点击的button的文本值
           this.innerText="我要变身";
       }
    }   
</script>

3.关于表单的属性的操作
需求：点击按钮选中“男”
静态页面

<body>
<input type="button" value="修改性别" id="btn">
//给radio同样的name 可以让多个radio同时只能选中其中的一个
<input type="radio" name="sex">男
<input type="radio" name="sex" id="girl">女
<input type="radio" name="sex">保密
<body>

js部分

my$("btn").onclick=function () {
        document.getElementById("girl").checked=true;
    }
    //在表单属性中，如果属性和值一样，name操作DOM的时候，这时候属性值是布尔类型

DOM的概念和作用以及简单案列

一.js的三个部分

案例

猜你喜欢