[暑假] DOM实践运用

关注

原创 2022-07-10 16:39:24 301 阅读 AI 写同款· GEO 优化 ›

《Web前端设计与开发》实验六：BOM与DOM编程实验一、实验内容页面跳转 (1) 问题：页面中放置一个按钮，点此按钮后，浏览器窗口从当前页面跳转到其他页面。 (2) 提示：使用 window 对象的 location 属性或 location 对象的 href 属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面跳转</title> 阅读详情

1. 什么是DOM?

文档对象模型(Document Object Model, 简称 DOM), 是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

2. DOM作用:

由W3C已经定义了一系列的DOM接口, 通过这些DOM接口可以改变网页的内容, 机构和样式.

说白了DOM就是用来处理网页的

文档: 一个页面就是一个文档, DOM中使用document表示

元素: 页面中所有的标签都是元素, DOM中使用 element 表示

节点: 网页中所有内容都是节点 (标签, 属性, 文本, 注释等), DOM中使用node表示

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

3. 我们如何获取页面中的元素?

有四种方法:

根据ID获取

根据标签名获取

通过HTML5新增的方法获取

特殊元素获取

4.介绍 getElementById()

方法getElementById(),返回的是一个元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">2019-9-9</div>
    <script>
      var times = document.getElementById('time');
    //   console.log(times);
    //   console.log(typeof times);

    //   console.dir  打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(times);
    </script>
</body>

</html>

5.介绍getElementByTagName() 方法

使用 getElementsByTagName() 方法可以返回带有指定标签签名的对象的集合

返回的是获取过来元素对象的集合以伪数组的形式存储的

6. 介绍element.getElemenntsByTagName('标签名');

根据标签名获取:

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

element.getElemenntsByTagName('标签名');

其中父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>加油</li>
        <li>从今天开始变得更好</li>
        <li>不怕吃苦</li>
        <li>我们都可以坚持</li>
        <li>不怕困难</li>
        <li>我们总能克服</li>
    </ul>
    <script>
        //返回的是 获取过来元素对象的集合  都是以伪数组的形式存储的 
       var arr = document.getElementsByTagName('li');
      // console.log(arr);
    //    console.log(arr[0]);

    //    2.我们想要依次打印里面的元素对象 我们可以采取遍历的方式
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
        // 3.如果页面中只有一个li 返回的还是伪数组的形式
        // 4.如果页面中没有这个元素 返回的还是空的伪数组的形式
   </script>
    
</body>
</html>

7.H5新增获取元素方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">饭盒1</div>
    <div class="box">饭盒2</div>
    <div id="nav">
        <ul>
            <li>加油</li>
            <li>从今天开始变得更好</li>
            <li>不怕吃苦</li>
            <li>我们都可以坚持</li>
            <li>不怕困难</li>
            <li>我们总能克服</li>
        </ul>
    </div>
 
    <script>
    //   1. getElementsByClassName() 根据类名获得某些元素集合
    var boxs = document.getElementsByClassName('box1');
    console.log(boxs);
    // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号
    var firstBox = document.querySelector('.box')
    // 3.querySelectorAll() 返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    // 4.获取body 元素
    var bodyEle = document.body;
    console.log(bodyEle);
    // 5.获取HTML元素
    var HTMLEle = document.documentElement;
    console.log(HTMLEle);
   </script>
    
</body>
</html>

8.什么是事件?

所谓事件说白了就是 触发然后响应的机制

事件是由三部分组成 事件源事件类型事件处理程序 我们也称之为事件的三要素

1) 事件的组成

1. 事件源: 就是事件被触发的对象 ==>简单理解就是谁被触发了

2.事件类型: 就是如何触发比如:鼠标点击(onclick) 还是鼠标经过还是键盘按下

3.事件处理程序: 通过一个函数赋值的方式完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">学起来</button>
    <script>
            // <!--       1. 事件源: 就是事件被触发的对象 ==>简单理解就是谁被触发了 -->
                    var btn = document.getElementById('btn');    
            // <!--       2.事件类型: 就是如何触发   比如:鼠标点击(onclick) 还是鼠标经过  还是键盘按下 -->
            // <!--       3.事件处理程序: 通过一个函数赋值的方式完成 -->
                    btn.onclick = function() {
                        alert('你一定可以');
                    } //这是一个最简单的事件
    </script>

</body>
</html>

2) 执行事件的步骤

1.获取事件源

2.注册事件( 绑定事件 )

3. 添加事件处理程序 (采取函数复制形式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
  <script>
    var div = document.querySelector('div'); //事件源
    
    div.onclick = function() {    //其中的 div.onclick叫做事件绑定
                                 // 整个叫做添加函数处理程序
        alert('我被选中了');
    }
  </script>
</body>
</html>

3) 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

9.操作元素(DOM中核心重点)

JavaScript的DOM操作可以改变网页内容, 结构和样式, 我们可以利用DOM操作元素改变元素里面的内容, 属性等.

1.改变元素内容

element.innerText

从起始位置到终止位置的内容, 但它不包括HTML标签, 而且空格和换行也会去掉

element.innerHTML

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

2.innerText 和 innerHTML的区别:

重点就一句话: innerHTML推荐使用

以下为进一步解释:

1.innerText 不识别HTML标签不是W3C规定的标准同时去除空格和换行

2. innerHTML可以识别HTML标签也是W3C规定的标准保留空格和换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <p>
        我爱坚持 因为坚持很酷
        <span>变得优秀只是第一步</span>
    </p>
    <script>
        // 1.innerText 不识别html标签 非标准
        var div = document.querySelector('div')
        // div.innerText = '<strong> 会变成粗体吗</strong> 不会';

        
        // 2. innerHTML 可以识别html标签  且是W3C的标准
        div.innerHTML = '<strong> 会变成粗体吗</strong> 会';

        var p = document.querySelector('p');
        console.log(p.innerText);  // innerText会消除空格 和 换行
        console.log(p.innerHTML); // innerHTML不会消除空格 和 换行
    </script>
    
</body>
</html>

3.修改元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="sky">天空</button>
    <button id="hard">努力</button>
    <img src="js.jpg" alt="" title="天空">

    <script>
        // 1.获取事件源
        var sky = document.getElementById('sky');
        var hard = document.getElementById('hard');
        var img = document.querySelector('img');
        // 2.注册事件 // 3.添加事件处理程序
        sky.onclick = function () {
            img.src = 'js.jpg';
        }
        hard.onclick = function () {
            img.src = '项目.jpg';
        }
       
    </script>
    
</body>
</html>

4.修改表单中的属性

innerHTML这个是用来修改普通盒子比如 div标签里面的内容的

而表单元素里面的值文字内容是通过value来修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    
    <script>
        // 1.获取事件源
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件  3.添加事件处理程序
        btn.onclick = function () {
            input.value = '从今天开始我要优秀';
            // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
            btn.disabled = true;
        }
    </script>
</body>
</html>

5. element.属性是可以获取内置属性值 (就是元素本身自带的属性)

element.getAttribute('属性'); 主要是获取自定义属性(标准) 就是我们程序员自己定义的属性

收录于