Javascript 进阶学习-DOM对象

最新推荐文章于 2023-04-20 17:18:39 发布

龙城老z

最新推荐文章于 2023-04-20 17:18:39 发布

阅读量188

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42435721/article/details/85084830

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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");  //  document.getElementsById("dv1").getElementsByTagName("p") ,获取div中的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

节点操作

回顾概念：
文档：document
元素：页面中的所有标签：element
节点：页面中所有的内容（标签，属性，文本）,node

节点操作的引入：先看如下一段代码：

<div>
   <p></p>
   <span><span/>
   <input type="text" >
   <a>href=""</a>
</div>

我们需要把div标签内的所有元素背景色设置成蓝色，这个时候用之前getElementById()的方式很难操作，不能从元素级别入手，于是引入节点概念。

节点的相关属性：

标签属性文本节点.点出来
nodeType：1 代表标签，2 表示属性，3 表示文本
nodeName：标签节点是大写的标签名，属性节点是小写的属性名，文本节点是 #text
nodeValue:节点的值：标签节点----null,属性节点--------属性值，文本节点------文本内容

获取相关节点：

父级节点
.parentNode：父节点
.parentElement：父元素
子级节点
.childNodes:子节点
.children:子元素
.firstChild:第一个子节点
.firstElementChild:第一个子元素
.lastChild:最后一个子节点
.lastElementChild:最后一个子元素
兄弟节点
.previousSibling：前一个兄弟节点
.previousElementSibling：前一个兄弟元素
.nextSibling：后一个兄弟节点
.nextElementSibling：后一个兄弟元素