Javascript 进阶学习-DOM对象

Javascript三大块

ECMAScript标准：JS的基本语法
DOM：文档对象模型—操作页面元素
BOM：浏览器对象模型----操作的是浏览器

DOM对象

html文件看成是一个文档,那么这个文档看成是一个对象,
页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象

标签可以嵌套,标签中有标签,元素中有元素

为元素注册事件

// 方式一：js代码和html代码未分离，没办法写太多JS代码

<！DOCTTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title></title>
</head>     
<body>
       <input type="button"  value="点击查看效果" onclick="alert('我被你点了')"/>
</body>
</html>

// 方式二：js代码和html代码未分离，但是可以写很多js代码的做法

<script> 
        function f() {
              alert('我被你点了');
              ..........
              .........函数中可以写很多代码
       }
</script>

<input type="button"  value="点击查看效果" onclick="f()">

// 方式三：实现js代码和html代码分离

 <script> 
        function f() {
              alert('我被你点了');
              ..........
              .........函数中可以写很多代码
       }
</script>

<input type="button"  value="点击查看效果" id="btn">

var btnObj=document.getElementById("btn");
btnObj.onclick=f;

DOM经常进行的操作

获取元素
动态创建元素
对元素进行操作(设置其属性或调用其方法)
事件(什么时机做相应的操作)

标签操作案例总结

凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
getElementsByTagName(“标签的名字”);返回的是一个伪数组，可通过for遍历，可以批量为元素绑定事件


document.getElementById("btn").onclick=function () {
       var pObjs= document.getElementsByTagName("p");
        for(var i=0;i<pObjs.length;i++){
                //每个p标签,设置文字
              pObjs[i].innerText="我们都是p";
      }
 };

3、在某个元素的事件中,自己的事件中的this就是当前的这个元素对象

4、批量绑定事件和排他功能实现（充分利用了以上2和3点的知识）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
</head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>

<script>

  //获取所有的按钮,分别注册点击事件
  var btnObjs = document.getElementsByTagName("input");
  //循环遍历所有的按钮
  for (var i = 0; i < btnObjs.length; i++) {
    //为每个按钮都要注册点击事件
    btnObjs[i].onclick = function () {
      //把所有的按钮的value值设置为默认的值:没怀孕
      for (var j = 0; j < btnObjs.length; j++) {
        btnObjs[j].value = "没怀孕";
      }
      //当前被点击的按钮设置为:怀孕了
      this.value = "怀孕了";
    };

  }

5、封装获取元素对象操作

function my$ ( id ) {
    
     return document.getElementById( id);
}

// 调用
my$ (" btn ").onclick=function() {
      ......语句体
};

6、凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

比如：background-color  ===>backgroundColor

Javascript 进阶学习-DOM对象

Javascript三大块

DOM对象

猜你喜欢