DOM知识点总结

最新推荐文章于 2024-03-28 23:55:28 发布

卡卡_西

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量1.6k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47224321/article/details/120977779

版权

一、DOM初识

1、DOM—文档对象模型操作页面元素的
2、DOM又被称为文档树模型
（1）文档：把一个html页面文件可以看成一个文档，由于万物皆对象，所以可以把这个文档看成一个对象。
（2）文档中的所有的标签都可以看成是一个对象
（3）页面中的每个标签都是一个元素（element）,每个元素都可以看成是一个对象。
（4）标签中可以嵌套标签，标签中有标签，元素中有元素
（5）一个html页面都有一个根标签—》html---->根元素，里面有很多个标签（元素）—》很多个对象
============》》标签可以叫元素，一个元素就是一个对象，一个标签就是一个对象
（6）元素(element)：页面中的所有的标签都是元素，元素可以看成对象。
（7）节点（node）:页面中所有的内容都是节点。内容：标签、属性、文本 -----》范围大
3、DOM文档树模型

> （一）获取页面元素（标签、对象）方法：
getElementById(id值);-------》一个对象
getElementsByTagName(标签的名字);-----》一个伪数组，for 循环
getElementsByName(name属性的值);------》一个伪数组
getElementsByClassName(类样式的名字);-----》一个伪数组

（二）操作的标签的属性：
阻止超链接跳转：return false;
（三）事件：
1：点击事件 onClick
2：鼠标进入和离开事件 onMouseOver onMouseOut
3：获取焦点事件和失去焦点事件 onFocus onblur
（四）设置成对标签的内容：
（1）innerText
（2）textContent
（3）innerHtml
设置、获取、区别
（五）自定义属性：
获取自定义属性值：getAttribute(自定义属性的名字);
设置自定义属性和值：setAttribute(属性的名字，值);
移除自定义属性：removeAttribute(属性的名字);

1、凡是成对的标签，中间的文本内容，设置的时候都是使用innerText属性;

<script>
    var btnObj = document.getElementById("btn");
    btnObj.onclick = function () {
     
        var pObj = document.getElementById("p1");
        pObj.innerText = "我是一个p";
    };

</script>

2、getElementsByTagName(“标签的名字”);--------->返回的是一个伪数组;要用到循环遍历。
当数组中只有一个元素时：

<script>
    document.getElementById("btn").onclick = function () {
     
        var imObjs = document.getElementsByTagName("img");
        imObjs[0].alt="柳岩";
        imObjs[0].title = "现身吧";
    };
</script>

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

<script>
    var btnObj = document.getElementById("btn");
    btnObj.onclick = function () {
     
        this.value = "我是按钮";
        this.type = "text";
        this.id = "btn2";
    };
</script>

4、排他功能

<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 inputs = document.getElementsByTagName("input");
    for (var i = 0 ; i < inputs.length;i++){
     
        inputs[i].onclick = function () {
     
            //先把所有的都是  哈哈
            for (var i = 0 ; i < inputs.length ; i++){
     
                inputs[i].value = "哈哈";
            }
            //点击的变成  嘿嘿
            this.value="嘿嘿";
        };
    }

</script>
</body>

5、在表单标签中，如果属性和值只有一个，并且值是这个属性的本身。那么，在写js代码的时候，这个属性值写布尔类型的。

<input type="button" value="修改性别" id="btn1">
<input type="radio" value="1" name="sex" checked="checked"> 男
<input type="radio" value="2" name="sex" id="women"> 女

<script>
    function my$(id) {
     
        return document.getElementById(id);
    }
    my$("btn1").onclick = function () {
     
        my$("women").checked = true;
    };
</script>

6、点击按钮设置div的高度和背景颜色

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
     
        my$("dv").style.width="300px";
        my$("dv").style.height="300px";
        my$("dv").style.backgroundColor = "pink";
    };
</script>

7、点击按钮设置div隐藏
CSS中隐藏：
（1）display:none display:block
（2）visibility: hidden visible
（3）overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
     
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn2">
<div id="dv" ></div>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
     
        my$("dv").style.display = "none";
    };
    my$("btn2").onclick = function () {
     
        my$("dv").style.display = "block";
    };
</script>
</body>
</html>

8、一个按钮控制div显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
     
        if (this.value =="隐藏"){
     
            my$("dv").style.display = "none";
            this.value="显示";
        }else if (this.value =="显示"){
     
            my$("dv").style.display = "block";
            this.value = "隐藏";
        }
    };
</script>
</body>
</html>

9、一个按钮控制div的显示隐藏
在js代码中DOM操作的时候，设置元素的类样式使用className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .cls {
     
            display: none;
        }

    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    //点击按钮，通过类样式来控制div的显示和隐藏
    my$("btn").onclick = function () {
     
        //判读div是否应用了类样式
        if (my$("dv").className != "cls"){
     
            //隐藏
            my$("dv").className="cls";
            this.value ="显示";
        }else{
     
            //显示
            my$("dv").className = "";
            this.value="隐藏";
        }
    };
</script>
</body>
</html>

10、一键换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
     
            background-color: pink;
        }
    </style>
</head>
<body>
<input type="button" value="换肤" id="btn">
<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
     
        document.body.className = document.body.className != "cls"?"cls":"";
    };
</script>
</body>
</html>

11、点击按钮禁用文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<input type="text" value="文本框" id="txt">
<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
     
        my$("txt").disabled = true;//禁用
    };
</script>
</body>
</html>

12、阻止超链接跳转
return false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    //阻止超链接的跳转：return false;-->
<a href="http://www.baidu.com" onclick="alert('哈哈，我被点击了');return false">百度</a>

<a href="http://www.baidu.com" id="ak">百度</a>

<script src="common.js"></script>
<script>
    my$("ak").onclick = function () {
     
        alert("很爱很爱你");
        return false;
    };
</script>

</body>
</html>

13、案例美女相册

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
     
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
     
      color: #333;
      background-color: transparent;
    }

    a {
     
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
     
      padding: 0;
    }

    li {
     
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery {
     

      list-style: none;
    }

    #imagegallery li {
     
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline-block;
    }

    #imagegallery li a img {
     
      border: 0;
    }
  </style>
</head>
<body>

<h2>
  美女画廊
</h2>

<ul id="imagegallery">
  <li>
    <a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1"/>
    </a>
  </li>
  <li><a href="images/2.jpg" title="美女B">
    <img src="images/2-small.jpg" width="100" alt="美女2"/>
  </a></li>
  <li><a href="images/3.jpg" title="美女C">
    <img src="images/3-small.jpg" width="100" alt="美女3"/>
  </a></li>
  <li><a href="images/4.jpg" title="美女D">

最低0.47元/天解锁文章

卡卡_西

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM知识点总结

一、DOM初识1、DOM—文档对象模型操作页面元素的2、DOM又被称为文档树模型（1）文档：把一个html页面文件可以看成一个文档，由于万物皆对象，所以可以把这个文档看成一个对象。（2）文档中的所有的标签都可以看成是一个对象（3）页面中的每个标签都是一个元素（element）,每个元素都可以看成是一个对象。（4）标签中可以嵌套标签，标签中有标签，元素中有元素（5）一个html页面都有一个根标签—》html---->根元素，里面有很多个标签（元素）—》很多个对象========
复制链接

扫一扫