JavaScript-DOM基础【获取元素和对其属性/事件的操作】

 

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

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

  •  文档:一个页面就是一个文档,DOM 中使用 document 表示
  •  元素:页面中的所有标签都是元素,DOM 中使用 element 表示
  •  节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
  • DOM 把以上内容都看做是对象

获取元素

  • 使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');

 

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

 document.getElementsByTagName('标签名');

    注意: 

      因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。

      得到元素对象是动态的

      如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

 

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

element.getElementsByTagName('标签名');

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

 

  • 通过 HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合

2. document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象

3. document.querySelectorAll('选择器');     // 根据指定选择器返回

注意: querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav'); 

 

  • 获取特殊元素(body,html)

     doucumnet.body  // 返回body元素对象

     document.documentElement  // 返回html元素对象

事件概述

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个 事件,然后去执行某些操作

事件三要素

  1. 事件源 (谁)

  2. 事件类型 (什么事件)

  3. 事件处理程序 (做啥)

var btn = document.getElementById('btn'); // 获取按钮
btn.onclick = function() { 
  alert('你好吗');  
};

 <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多,我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

操作元素

    改变元素内容

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

     element.innerHTML :起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行

    常用元素的属性操作

     1. innerText、innerHTML 改变元素内容

      2. src、href

      3. id、alt、title

    表单元素的属性操作

       利用 DOM 可以操作如下表单元素的属性:  type、value、checked、selected、disabled

样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。  

  1. element.style     行内样式操作

  2. element.className 类名样式操作

注意:

  1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor

  2.JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高

排他思想

如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:

  1. 所有元素全部清除样式

  2. 给当前元素设置样式

  3. 注意顺序不能颠倒,首先干掉其他人,再设置自己

 

自定义属性的操作

1. 获取属性值

 element.属性  获取属性值。

  element.getAttribute('属性');

区别:

 element.属性  获取内置属性值(元素本身自带的属性)

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

2. 设置属性值

  element.属性 = ‘值’  设置内置属性值。

  element.setAttribute('属性', '值')

区别:

  element.属性  设置内置属性值

  element.setAttribute(‘属性’);  主要设置自定义的属性 (标准)

3. 移除属性

element.removeAttribute('属性');

H5自定义属性

  • 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
  • 自定义属性获取是通过getAttribute(‘属性’) 获取。
  • 但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。

设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

  比如 <div data-index=“1”></div>

或者使用 JS 设置  

  element.setAttribute(‘data-index’, 2)

获取H5自定义属性

兼容性获取   element.getAttribute(‘data-index’);

H5新增 element.dataset.index  或者 element.dataset[‘index’]   ie 11才开始支持

 

posted @ 2022-12-22 20:59  link-零  阅读(345)  评论(0编辑  收藏  举报