Dom(1)——获取子节点childNodes、子元素节点children、getAttribute()、getElementById(）、getElementsByTagName（）......

温婉婉

已于 2022-11-20 16:29:19 修改

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-10-23 23:50:26 首次发布

本文链接：https://blog.csdn.net/weixin_48796690/article/details/127483565

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了DOM的基本操作，包括改变body背景色、获取子节点和子元素节点、读取属性、根据ID和标签名选择元素、处理自定义name属性以及添加事件监听。通过实例展示了如何实现鼠标悬浮时更换图片、点击抽奖等交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初式识Dom

1、改变body的背景色

方式1：

<body>
    <input type="text" id="username">
    <input type="text" id="age" name="">
</body>
<script>
    //获取body
    let bodyObject=document.body
    //打印body的详细介绍
    console.dir(bodyObject)   
    //方式1：改变body的背景色
    bodyObject.style.backgroundColor='green'
    
</script>

效果图：
在这里插入图片描述

方式2：

<body>
    <input type="text" id="username">
    <input type="text" id="age" name="">
</body>
<script>
        //  获取body
        let bodyObject=document.body
        //  方式2：
        bodyObject.bgColor="red"
</script>

效果图：
在这里插入图片描述

2、获取子节点用`childNodes`

<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>

<script>
    //获取子节点（一般不常用）
    let bodyObject=document.body
    let childNodes= bodyObject.childNodes
</script>

在这里插入图片描述

3、获取子元素节点用`children`

<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>

<script>
    //获取子元素节点  注意：HTMLCollection是一个伪数组
     let bodyObject=document.body
     let children=bodyObject.children
     console.dir(children)//我们的预期结果是HTMLCollection （它是一个伪数组）
</script>

在这里插入图片描述
为什么会说HTMLCollection 是个伪数组呢？我们来验证一下，看看它到底是不是伪数组？

//判断HTMLCollection是不是数组的实例。是就输出true，不是就输出：false
   let bodyObject=document.body
   let children=bodyObject.children
   let r=Array.isArray(children)
   console.dir(r)

运行结果：

在这里插入图片描述

练习：假如只允许你改变input标签的外观样式，怎么做？


<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>

<script>
     let bodyObject=document.body
     let children=bodyObject.children
     for(let index=0;index<children.length;index++){
        const element=children[index]
       //如果元素的标签名是input,就改变元素的外观样式
        if(element.tagName.toLowerCase()=='input'){
            element.style.border='2px red solid'
            element.style.width='300px'
        }
        console.log(element)
    }
</script>

运行结果：

在这里插入图片描述

4、获取某个属性，用`getAttribute('')`

<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>

<script>
     let getValue=function(){
     let body=document.body
     let input=body.firstElementChild
     // 要获取value属性，用 .getAttribute('value')或者直接写成 .value
     let value=input.getAttribute('value')
     alert(value)
     // let a=input.value
     // alert(a)
 }
    getValue()
    
</script>

运行结果：

在这里插入图片描述

5、根据标签id获得 `getElementById(）`是唯一的

<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>
<script>
      let getInputValue=function(){
      let ageInput=document.getElementById('age')
      let v=ageInput.value
      alert(v)
   }
      getInputValue()
</script>

运行结果：
在这里插入图片描述

6、根据标签名称获得 `getElementsByTagName` 返回值是多个 HTMLCollection 不唯一

<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>

<script>
      let changeBorder= function(tagname,color){
      let a=document.getElementsByTagName(tagname);
      for(let i=0;i<a.length;i++){
          //注意底下'1px solid '这个里面有空格哦，毕竟这是一种严格的写法方式
          a[i].style.border='1px solid '+color
        }
     }
      changeBorder('input','red') 
      changeBorder('div','green')
</script>

运行结果：
在这里插入图片描述

7、根据自定义的name名获得，`getElementsByName`

返回值是多个 NodeList

<body>
    <input type="text" id="age" value="zhangsan">
    <input type="text" id="username" name="李四"> 
    <span>aaaaaaaaaaaa</span>
    <div name="title">
      hello
    </div>
    <div>
        how
    </div>
    <p name="title">
        pp
    </p>
    <p name="content">
        ppp
    </p>
</body>

<script>
       let changeColor =function(){
       let b=document.getElementsByName('title')
       for(let i=0;i<b.length;i++){
          b[i].style.color='red'
      
        }
    }
    changeColor()
</script>

运行结果：

在这里插入图片描述

8、制作一个爱好框，全选（加事件）

<!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>爱好框，全选（加事件）</title>
</head>

<body>
    全选：<input type="checkbox" id="all" onclick="checkAll()">
    <br>

    <input type="checkbox" name="hobby">旅游
    <br>

    <input type="checkbox" name="hobby">打游戏
    <br>

    <input type="checkbox"" name="hobby">做饭

<script>
        let checkAll = function () {
        let checkBox = document.getElementById('all')
        let isCheck = checkBox.checked //获取checked属性的值：true , false
        // console.log(isCheck)

        let collection = document.getElementsByName('hobby')
        for (let i = 0; i < collection.length; i++) {
        if(isCheck==true){
           //设置checked属性
           collection[i].setAttribute('checked',isCheck)
         }else{
                //移除checked属性 
                collection[i].removeAttribute('checked')
                }
            }
        }
</script>
</body>

</html>

运行结果：

在这里插入图片描述

9、举个例子，自己体会一下`setAttribute()`与`getAttribute()`

设置自定义属性用setAttribute()

获取原本就有的属性用getAttribute()


<body>
    <button onclick="a()">add属性</button>
    <button onclick="b()">get属性</button>

    全选：<input type="checkbox" id="all" onclick="checkAll()">
    <br>

    <input type="checkbox" name="hobby">旅游
    <br>

    <input type="checkbox" name="hobby">打游戏
    <br>

    <input type="checkbox"" name="hobby">做饭

    <script>
        //设置自定义属性用setAttribute
         let a=function(){
             let getAll=document.getElementById('all')
             getAll.setAttribute('jiaoshi','feifei')
         }
        //获取原本就有的属性用getAttribute
         let b=function(){
             let c=document.getElementById('all')
             let r=c.getAttribute('jiaoshi')
             alert(r)
         }
    </script>


</body>

运行结果：

在这里插入图片描述

10、事件类型：

onclick (单击)

onmouseover (鼠标悬停)与onmouseout (鼠标离开)

onmousemove (鼠标移动)

onmousedown (鼠标按下)onmouseup (鼠标弹起的一瞬间)

onmousewheel (鼠标滚珠滚动)

onscroll (页面滚动条滚动)

onresize (浏览器窗口改变)

onload (页面加载)与onunload (页面加载没有完成的时候)

onfocus (文本框聚焦)与onblur (文本框失去焦点)

onkeydown (键盘按下时)

onkeyup (键盘弹起时)

例1：鼠标悬浮时，展现另一幅图片，鼠标不悬浮的时候，又是原图片

<!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>鼠标悬停在图片上，立马切换成另一张图片</title>
</head>

<style>
    div{
        width: 500px;
        height: 500px;
        margin: auto;
        border: 10px solid red;
        border-radius: 250px;
        overflow: hidden;  /* 在div上设置overflow: hidden 表示溢出div的内容隐藏掉 */
    }
    img{
        width: 500px;
        height: 500px;
    }
</style>

<body>
    <div>
      <img src="../2.9js的学习/img/西财美照1.jpg" alt="" id="img">
    </div>
</body>

<script>
    let img=document.getElementById('img')
    //为img绑定事件
    img.onmouseover=function(){
        img.setAttribute('src','../2.9js的学习/img/西财美照2.jpg')
    }
    img.onmouseout=function(){
        img.setAttribute('src','../2.9js的学习/img/西财美照1.jpg')
    }
</script>

</html>

运行效果图：
在这里插入图片描述

在这里插入图片描述
例2：点击抽奖按钮，会自动随机抽奖，且只能抽一次

<!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>抽奖(文字版)</title>
</head>
<style>
    div{
        width: 200px;
        height: 70px;
        border: 2px solid red;
        background-color: greenyellow;
        margin: auto;  /* div在页面上居中 */
        line-height: 70px;  /* 可自行设置行高 */
        text-align: center;   /* 文字在div内居中 */
    }
    
    div:hover{
        cursor: pointer;   /* 鼠标放上去，变成手指 */
    }
</style>
<body>
    <div id="guess">
         抽奖
    </div>

    <hr>

    <div id ='gift'>
      
    </div>

    
    <script>
        let getGift=function() {
        let arr=['iphone13','荣耀13','吸尘器','洗衣机']
        let index=Math.floor(Math.random()*4)
        let giftDiv=document.getElementById('gift')
        giftDiv.innerText=arr[index]

        //由于抽奖只能抽一次，不能每点击抽奖就抽一次，所以在整个代码写完之后的最后一步，要么就给它加上取消事件，要么就给它没有，要么给它藏起来看不见，三种任选一种，如下所示：
        //第一种：取消事件（更常用）
        divGuess.onclick=null;
        //第二种：没有
        // divGuess.style.display='none' 
        //第三种：隐藏起来看不见
        // divGuess.style.visibility='hidden'
        }

        let divGuess=document.getElementById('guess')
        divGuess.onclick=getGift;
    </script>
</body>
</html>