对DOM的理解，如何获取元素，事件基础以及部分操作元素

最新推荐文章于 2024-06-07 23:26:45 发布

热身就犯困

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量65

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73805336/article/details/130318893

版权

Web Apl

API（应用程序编程接口）：预先定义的函数

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

主要针对浏览器做交互效果

Web API 一般都有输入和输出（函数的传参和返回值）Web API 很多都是方法（函数）

1.DOM

1.1DOM简介

文档对象模型，是处理可扩展标记语言的标准编程接口

（1）DOM树

文档：一个页面就是一个文档 document

元素：页面中所有标签都是元素 element

节点：网页中所有的内容都是节点（标签属性文本注释） node

DOM把以上内容都看作是对象

1.2 获取元素

（1）根据ID获取

 <div id="time">2023-3-1</div>
    <script>
        // 1.因为文档页面从上往下加载，所有得先有标签， 所以我们script写到标签的下面
        // 2.get 获得  element  元素  by 通过  ID    驼峰命名法   
        // 3.参数  ‘id是大小写敏感的字符串’  
        // 4.返回的是一个元素对象
        var timer =  document.getElementById('time');
        console.log(timer);
        // 5.  console.dir  打印我们返回的元素对象   更好的查看里面的属性和方法
        console.dir(timer);
    </script>

（2）根据标签名获取

获取所有元素

<ul>
        <li>12345</li>
        <li>1234</li>
        <li>1241234</li>
        <li>1241</li>
        <li>12414</li>
</ul>
    <script>
        // 返回的是 获取过来元素对象的集合  以伪数组的形式储存的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.想要依次打印里面的元素对象  采取遍历的方式
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
        }
        // 3.如果页面中只有一个li，返回的还是伪数组的形式
        // 4.如果页面中没有这个元素，返回的是空的伪数组的形式

还可以获取某个父元素内部所有指定标签名的子元素

element.getElenmentsByTagName('标签名')；

父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

获取特定元素

 <ul>
        <li>12345</li>
        <li>1234</li>
        <li>1241234</li>
        <li>1241</li>
        <li>12414</li>
    </ul>
<ol>
        <li>12345</li>
        <li>1234</li>
        <li>1241234</li>
        <li>1241</li>
        <li>12414</li>
    </ol>
<script>
         // 5.element.getElenmentsByTagName('标签名')；      父元素必须是指定的单个元素
        var  ol = document.getElementsByTagName('ol');  //[ol]
        console.log(ol[0].getElementsByTagName('li'));
    </script>

（3）根据HTML5新增的方法获取

<div class="box">hezi</div>
   <div class="box">chanpin</div>
   <div id="nav">
        <ul>
            <li>123</li>
            <li>123</li>
        </ul>
   </div>
   <script>
        // 1.getElementsByClassName  根据类名获取某些元素  返回元素对象集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
 		// 2. querySelector根据指定选择器返回第一个元素对象   里面的选择器需要加符号   .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        // 3.querySelectorAll()  返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
   </script>

(4)获取特殊元素（body html）

<script>
        // 1.获取body  元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

1.3事件基础

js使我们有能力创建动态页面，而事件是可以被js侦测到的行为

<body>
    <button id="btn">tang</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1、事件由三部分组成   事件源   事件类型   事件处理程序    称为事件三要素
        // （1）事件源  事件被触发的对象  
        var btn = document.getElementById('btn');
        // (2)事件类型  如何触发   鼠标点击（onclick）  鼠标经过   键盘按下
        // (3)事件处理程序   通过一个函数赋值的方式定义
        btn.onclick = function() {
            alert('dian');
        }
    </script>
</body>

1.4操作元素

可以利用操作元素改变元素的内容属性，注意以下都是属性：

（1）改变元素内容

element.innerText

从起始位置到终止位置的内容，但它会去除html标签，同时空格和换行也会去掉

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>12345</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = date.getDay();
       return  '今天是'+year+'年'+month+'月'+dates+'日 '+arr[day];

        }

        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
</body>

element.innerHTML

从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<body>
    <div></div>
    <p>
        woshiwneis
        <span>
            1231
        </span>
    </p>
    <script>
        // innerText  和 innerHTML区别  
        // 1.innerText    不识别html标签  非标准    去除空格和换行
        var div = document.querySelector('div ');
        div.innerText = 'jintianshi1';
        // 2.innerHTML   识别html标签  标准   保留空格和换行
        div.innerHTML = '<strong>jintiansih</strong>  wqef';
        // 这两个属性是可读写的   可以获取元素里面的内容  
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
 </script>
</body>

（2）改变元素属性

改变图片属性

<body>
    <button id="ldh">liudehua</button>
    <button id="zxy">zhangxueyou</button>
    <img src="图片/2.png" alt="" title="liudehua">
   
    <script>
        // 修改元素属性
        // 1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2.注册事件  处理程序
        zxy.onclick = function() {
            img.src = '图片/3.png';
            img.title = 'zhangxueyou';
        }
        ldh.onclick = function() {
            img.src = '图片/2.png';
            img.title = 'liudehua';
        }
    </script>

</body>