js-DOM选择器

拼搏现实的明天。 2022-03-15 09:35 262阅读 0赞

**目录**

一、文本操作

1、 纯文本

2、带有标签效果的文本设置

3、案例

案例1、操作文本节点内容

案例2、点击按钮出来弹框

案例3、点击弹框修改文本内容和地址

二、属性操作

1、默认属性（自带属性）

2、自定义属性

3、案例

案例1、通过表单元素属性点击按钮后显示用户选择了几个

案例2、自定义下标属性

案例3、点击小图切换大图

三、样式操作

1、行内样式

2、计算样式

3、案例

案例1、通过鼠标的移入和移出实现盒子颜色的转换

案例2、通过鼠标点击实现盒子形状的转变

案例3、通过js操作样式（衣服）实现鼠标的移入和移出实现盒子形状的转变

案例4、通过h5的样式操作实现盒子的形状转换

--------------------

DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个`nodeType`属性用来表示当前元素的类型，它是一个整数：

1.  Element，元素
2.  Attribute，属性
3.  Text，文本

DOM节点创建最常用的便是document.createElement和`document.createTextNode`方法：

# 一、文本操作 #

## 1、 纯文本  ##

获取 ：对象.innerText  
  设置： 对象.innerText = '你要设置的文本内容'

## 2、带有标签效果的文本设置 ##

获取对象里的所有内容： 对象.innerHTML

设置对象里面的内容：对象.innerHTML = '标签字符串' \# 原本对象里存在的内容会被你设置的字符串覆盖掉

## 3.案例 ##

### 案例1：操作文本节点内容 ###

<p id="myP"><a href="#">百度</a> </p>
    <script>
        /*window > document
         * onload 界面加载事件 ====》 当网页的文档树生成 以及外部链接文件，图片视频（静态资源）加载
         * 成功以后 才会执行函数里的代码
         * 入口函数  有且只有一个 如果有多个会覆盖 */
        window.onload = function () {
            // 1: 获取p标签  通过id 获取
            var myP = document.getElementById('myP');
            //2: api 获取p的内容 = 修改
            // 对象.innerText  纯文本
            // 对象.innerHTML  带有标签效果的文本设置
            console.log(myP.innerText); //将p标签的文本内容显示在后台
            myP.innerText = '<h2>谁的青春不迷茫</h2>' //将带有<a></a>链接的<p></p>标签变成了纯文本标签<h2></h2>
            myP.innerHTML = '<a href="http://sina.com">新浪</a>'//将带有百度链接地址的百度标签变成了带有新浪地址连接的新浪标签

### 案例2：点击按钮出来弹框 ###

<button> 点击我有惊喜</button>
    <button> 点击我有惊喜1</button>
    <button> 点击我有惊喜2</button>
    <script>
        window.onload = function () {
            // 1.获取元素  Tag
            // 通过标签获取元素  var btn = document.getElementsByTagName()
            //默认返回值是数组
            // 2.基本时间
            var btn = document.getElementsByTagName('button');
            // btn--->[button]   btn[0]. btn[1].btn[2]
            console.log(btn[0])
            //btn  绑定点击事件
            btn[0].onclick = function () {
                alert('你是不是傻？')
            }
            btn[1].onclick = function () {
                alert('你是不是缺心眼子？')
            }
            btn[2].onclick = function () {
                alert('你是不是饿了？')
            }
        }
    </script>

![2019030120544217.png][]

![20190301205457554.png][]

![20190301205509466.png][]

### 案例3、点击弹框修改文本内容和地址 ###

<a href="http://baidu.com" class="myA">百度</a>
    <button class="btn">点击</button>
    <script>
        /*
        * 1: 获取元素方法  通过类名
        * 2：修改 热点文字 地址 href*/
        window.onload = function () {
            /*类 获取  一组  返回值：数组*/
            var myA = document.getElementsByClassName('myA')[0]
            var btn = document.getElementsByClassName('btn')[0]
            btn.onclick = function () {
                myA.innerText = '新浪';
                myA.href = 'http://sina.com'
            }
        }
    </script>

点击前

# ![20190301205915152.png][] #

点击后

![20190301210027378.png][]

# 二、属性操作 #

## 1、默认属性（自带属性）  ##

默认属性包括：src alt title  href target action method 等

表达方式：对象.href

input 表单元素获取用户输入值 通过  对象.value     对象.checked == true      对象.selected

简单表示
    var obj = {
        name:'lili',
        year:34
    }
    可以通过 obj.name  obj.year 或者  obj['name'] 来获取相应的值

## 2、自定义属性 ##

js  设置自定义属性  对象.setAttribute('属性名字','属性值')
    获取自定义属性  对象.getAttribute('属性名')
    移除自定义属性值  removeAttribute('属性名')

this 属性 
    1: 普通函数   this就指浏览器顶级对象  window
    2：事件函数   this指的是当前触发事件的元素  简而言之就是你点击谁谁就是this

## 3、案例 ##

### 案例1：通过表单元素属性点击按钮后显示用户选择了几个 ###

<form action="">
        姓名：<input type="text">
        爱好：跳拉丁舞<input type="checkbox" name="hobbies" value="0">
              跑马拉松 <input type="checkbox" name="hobbies" value="1">
              唱歌 <input type="checkbox" name="hobbies" value="2">
    </form>
    <button>显示用户勾选了几个checks</button>
    <script>
        window.onload = function () {
            var checks = document.getElementsByName('hobbies');
            var btn = document.getElementsByTagName('button')[0];
            var num = 0;
            console.log(checks.length);
            btn.onclick = function () {
                //统计用户选了几个---》 几个复选框身上有checked === true
                num = 0
                for(var i = 0;i<checks.length;i++){
                    if(checks[i].checked){
                        num+=1;
                        console.log(checks[i].value)
                        
                    }
                }
                alert(num)
            }
    
        }
    </script>

# ![20190301213017886.png][] #

### 案例2、自定义下标属性 ###

<span ><a href="javascript:;">百度</a></span>
    <span ><a href="javascript:;">火狐</a></span>
    <span in = 2><a href="javascript:;">新浪</a></span>
    <span in = 3><a href="javascript:;">谷歌</a></span>
    <script>
        window.onload = function () {
            /*  对应   引入索引 ---》标号属性  index = 0*/
            /*
            * 1：自定义属性
            * （1）直接写
            * (2) js  设置自定义属性  对象.setAttribute('属性名字','属性值')
            * */
            var spans = document.getElementsByTagName('span');
            /*spans 数组*/
            for(var i =0;i<spans.length;i++){
                spans[i].setAttribute('index',i)
            }
            /*获取自定义属性  对象.getAttribute('属性名')*/
            alert(spans[1].getAttribute('index'));
            /*移除自定义属性值  removeAttribute()*/
            spans[3].removeAttribute('in')
        }
    </script>

# ![20190301214658906.png][] #

### 案例3、点击小图切换大图 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$美少女战士$</title>
        <style>
            /*选择器  css   前几个-n+4 \
            注意：  不要 4-n 不识别4-n 只知道+ 号
            后几个 n+2    n=0 -n+4 = 4    3 4 5    */
            img:nth-of-type(-n+4) {
                /*圆角边框  css3  border-radius: 50%  圆   / px 40px */
              /*  border-radius: 50%;*/
                width: 200px;
                height: 200px;
                float: left;
            }
        </style>
    </head>
    <body>
    <img src="images/01.gif" alt="">
    <img src="images/02.gif" alt="">
    <img src="images/03.gif" alt="">
    <img src="images/05.gif" alt="">
    <div style="clear: both"></div>
    <img src="images/placeholder.png" alt=""  class="place">
    <script>
        window.onload = function () {
            /*
            * 1:获取元素  h5 document.querySelector('')  返回值 一个确定元素
            * 一组  document.querySelectorAll('')
            *
            * ''里的选择器  css里有的选择器 直接用
            *
            * */
    
            var imgs = document.querySelectorAll('img:nth-of-type(-n+4)');
            console.log(imgs)
            var placeHodler = document.querySelector('.place');
            //2:绑定点击事件  事件函数是一个回调函数  ===》事件触发以后回来再调
            for(var i = 0;i<imgs.length;i++){  // 没点击之前 i===4
                 // 点击之后 才执行 function(){}
                imgs[i].onclick = function () {
                    //3:获得用户点击的那个对象  this 对象   事件函数里的话 ---》 指当前触发事件的对象
                    var luJing  = this.src;  // ?imgs[4].src;
                    console.log(luJing)
                    //4: 这个对象身上的src 地址
                    //5: 获取的地址 赋值  默认图片 src
                    placeHodler.style.width = '400px'
                    placeHodler.style.height = '400px'
                    placeHodler.src = luJing ;
    
                }
    
            }
    
        }
    </script>
    </body>
    </html>

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70][] #

# 三、样式操作 #

## 1、行内样式 ##

行内演示（设置到元素行内）

特点： 设置： style.属性名 设置到元素行内

获取： style.属性名 可以获取行内的样式，但是获取不到文本内部以及外部样式

box.style.width = '400px'; 
    
    box.style.backgroundColor = 'black'

## 2、计算样式    ##

计算样式：用来获取文本外部的样式  
获取元素文本外属性值：getComputedStyle(对象).属性名字 只能获取不能设置

js  操作样式（衣服）---》 对象.className = '样式名'
                            对象.className = ' ' // 清除样式
    h5  操作样式（衣服）----》 对象.classList.add('样式名')
                            对象.classList.remove('样式名')
                             对象.classList.toggle('样式名')//切换样式

## 3、案例 ##

### 案例一；通过鼠标的移入和移出实现盒子颜色的转换 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 2][]

### 案例2、通过鼠标点击实现盒子形状的转变 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 3][]

![20190301220935431.png][]

### 案例3、通过js操作样式（衣服）实现鼠标的移入和移出实现盒子形状的转变 ###

此方法实际上就是通过改变创建的元素的类名来实现转变的

![20190301223520644.png][]

![20190301223531719.png][]

### 案例4、通过h5的样式操作实现盒子的形状转换 ###

[2019030120544217.png]: /images/20220315/ea5c49d58f9e4c4c8228051f0153da8d.png
[20190301205457554.png]: /images/20220315/2124a8f7fb6a4f298ed920b0c64be2dd.png
[20190301205509466.png]: /images/20220315/575c209e64874f3ebe3b8b853c3f14a9.png
[20190301205915152.png]: /images/20220315/480f3862fb244f12a84f2b67d032eae7.png
[20190301210027378.png]: /images/20220315/76bdbff7746949b69c283c23a66222f9.png
[20190301213017886.png]: /images/20220315/302d78625b054db79ce54e7a17a2a495.png
[20190301214658906.png]: /images/20220315/a0c182e9dbe0442b9335176f5ef7ec0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70]: /images/20220315/92e9592bc6814218ba35bfe1d5f82f25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1]: /images/20220315/5d4be7b2d8074e6da167fb6627ced454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 2]: /images/20220315/0d6fa934618046a5a73a9f781a78b191.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 3]: /images/20220315/9f5a4038bbe946388073cb098a535705.png
[20190301220935431.png]: /images/20220315/aa3e9bd9680647fdb8acc93119282e99.png
[20190301223520644.png]: /images/20220315/f8f42695db1c4affa2873ba3bfd30296.png
[20190301223531719.png]: /images/20220315/147ca8e097564790baa1af65fe51e7ff.png