js-api操作dom元素01----获取元素的方式以及事件三要素

最新推荐文章于 2024-10-01 18:51:18 发布

A &......

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量161

点赞数

分类专栏： javascript之dom操作文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/117047785

版权

javascript之dom操作专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.api:一个可以调用的接口；
2.获取元素的6种方式：

2.1  根据id来获取

<body>
    <span id='tt'> 6 </span>
    <span class="s1"> 6 </span>
    <span class="s1"> 6 </span>
    <span class="s1"> 6 </span>
    <span class="s1"> 6 </span>
    <script>
        // 1.根据id来获取：
        console.log(document.getElementById('tt')); //<span id='tt'> 6 </span>
    </script>
</body>

2.2  根据class来获取

   console.log(document.getElementsByClassName('s1'));  //HTMLCollection(4) [span.s1, span.s1, span.s1, span.s1]

此方法获得的是伪数组：有length属性，但是数组的方法，如push，shift等不能使用，要想获取里面的各个元素，需要遍历。
  2.3根据标签名来获取

 console.log(document.getElementsByTagName('span'));
        //HTMLCollection(5) [span#tt, span.s1, span.s1, span.s1, span.s1, tt: span#tt]

   此方法获取的元素，也是伪数组。
   2.4 通过name来获取元素

<input type="text" name="ipt1">
 console.log(document.getElementsByName('ipt1'));  //NodeList [input]

   2.5通过class选择器获取元素1

 console.log(document.querySelector('.s1'));//<span id='tt'> 6 </span>

只获取class类名为s1的第一个元素
 2.6通过class选择器获取元素2

console.log(document.querySelectorAll('.s1')); //NodeList(4)

 获取所有的class类名为s1的

3.事件三要素：事件源；事件类型；事件处理程序；
事件触发的三种写法：

3.1 html 内部书写所有

 <button id="btn">点击</button>
    <script>
        //html 内部书写所有
        var btn1 = document.querySelector('#btn');
        btn1.onclick = function() {
            alert('我被点击了')
        }
    </script>

3.2 html行内触发：此方法在行内加函数名字以后还要加上括号调用；

//html行内触发
    <button id="btn" onclick='fun1()'>点击</button>
    <script>
        function fun1() {
            alert('我被点击了')
        }
    </script>

3.3外部引入：src=‘外部的js文件‘

4.innerText和innerHTML的区别：

<div>
        <span>我是一个text文件</span>
    </div>
    <script>
        var div = document.querySelector('div');
        console.log(div.innerText); //我是一个text文件
        console.log(div.innerHTML);  //        <span>我是一个text文件</span>
    </script>

当我们使用元素属性的时候，innerText仅仅返回的是文本，而innerHTML返回的不只有文本还有标签，

<div>
        <span>我是一个text文件</span>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '111' //页面出现111
       
    </script>

 <div>
        <span>我是一个text文件</span>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '<span>222</span>' //页面出现<span>222</span>
        div.innerHTML = '<span>222</span>' //页面出现222
    </script>

我们想要通过innerText或者innerHTML改变元素里面的内容时，innerText不会帮我们自动解析富文本（含有标签名字的文本），而innerHTML会自动解析富文本；

5.非表单元素属性的操作：

<button>点我显示图片</button>
    <img src="" alt="">
    <script>
        var btn = document.querySelector('button');
        var flag = false;
        btn.onclick = function() {

            var img = document.querySelector('img');
            if (flag) {
                img.src = '';
                flag = false;
                this.innerText = '点我显示图片'
            } else {
                img.src = 'images/ldh.jpg';
                flag = true;
                this.innerText = '点我隐藏图片'
            }
        }
    </script>

6.表单元素属性的操作：

    6.1value用于大部分表单元素的内容的获取（option除外）

<button>石家庄</button>
    <select name="">
          <option value="1111">北京</option>
          <option value="2222">天津</option>
          <option value="3333">石家庄</option>
    </select>
    <script>
        var opt = document.querySelectorAll('option');
        console.log(opt[0].value);   //打印111，不打印‘北京’
    </script>

点击按钮，select中选中的是按钮里面的内容：

<button>石家庄</button>
    <select name="">
          <option value="1111">北京</option>
          <option value="2222">天津</option>
          <option value="3333">石家庄</option>
    </select>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            document.querySelector('select').value = '3333';
        }
    </script>

  6.2:：type可以获取input标签的类型（输入框和复选框）
  6.3：disabled禁用属性checked复选框选中属性：

<button>石家庄</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            this.disabled = 'disabled'
        }
    </script>