js的dom对象初识

最新推荐文章于 2024-08-14 20:13:10 发布

paidaboluo

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量314

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/paidaboluo/article/details/121548472

版权

首先了解一下，下列的定义方便理解

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性

获取元素的方式

1、根据id获取元素

  var div1 = document.getElementById("box1");

2、通过类名获取元素

 var p1Arr = document.getElementsByClassName("p1");

console.log(p1Arr instanceof Array);//false

  console.log(Array.isArray(p1Arr));//false

  console.log(p1Arr.length);

  console.log(p1Arr[0]);

  console.log(p1Arr[1]);

伪数组定义：

伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组

常见的参数的参数 arguments，DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）

就是element 后带 s 的单词组合访问的话需要在后边加中括号加数字：例 [0]

3、通过标签名获取元素

var tag1 = document.getElementsByTagName("div");

   console.log(tag1);

   console.log(tag1[0]);

4、通过name名获取元素

 var userList = document.getElementsByName("user");

  console.log(userList);

  for (var i = 0; i < userList.length; i++) {

    console.log(userList[i]);

  }

通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

  var div1 = document.querySelector(".box1");

  console.log(div1);

  var li1 = document.querySelector("ul>li");

  console.log(li1);

  var user_1 = document.querySelector("#user_1");

  console.log(user_1)

通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称

 var boxList = document.querySelectorAll(".box1");

  console.log(boxList);

  var listLi = document.querySelectorAll("ul li");

  console.log(listLi);

事件初识

事件：触发-响应机制

(1)、事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

(2)、事件的基本使用

<script>

var box = document.getElementById('box');

box.onclick = function () {

console.log('代码会在box被点击后执行');

};

</script>

鼠标单击事件：onclick 浏览器加载完成事件：onload

例子：点击

<!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>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }

    </style>
</head>
<body>
    <button id="ran">点击随机改变颜色</button>
    <button id="on">点击开灯</button>
    <button id="off">点击关灯</button>
    <button id="shu">1-16随机点名</button><span id="zi"></span>
    <div id="box"> </div>
    <ul>
        <li>11111111111</li>
        <li>22222222222</li>
        <li>33333333333</li>
        <li>44444444444</li>
        <li>55555555555</li>
    </ul>
    <button id="huanse">换色</button>
</body>
</html>
<script>
//封装的随机颜色
    function raRGb(){
    var a= Math.floor(Math.random()*256)
    var b= Math.floor(Math.random()*256)
    var c= Math.floor(Math.random()*256)    
    return 'rgb('+a+','+b+','+c+')'
}
console.log(raRGb())
//随机数获取
function Random(n,m){
    a=Math.floor(Math.random()*(m-n+1))+n
    return a;
}
function rr(){
    n=prompt('1')
    m=prompt('2')
    
    return Random(Number(n),Number(m))
}

//点击事件们
//随机该背景颜色
    document.getElementById('ran').onclick=function(){
        document.getElementsByTagName('body')[0].style.backgroundColor=raRGb()
    }
//类似：开灯
    document.getElementById('on').onclick=function(){
        document.getElementsByTagName('body')[0].style.backgroundColor='white'
    }
//类似：关灯
    document.getElementById('off').onclick=function(){
        document.getElementsByTagName('body')[0].style.backgroundColor='black'
    }
//盒子的半透明
    document.getElementById('box').onclick=function(){
        document.getElementById('box').style.opacity=0.5
    }
//输入2个数字，获取俩个数字之间的随机一个数
    document.getElementById('shu').onclick=function(){
        document.getElementById('zi').innerHTML=rr()
    }
//li的隔行换色
    document.getElementById('huanse').onclick=function(){ 
        var a=document.getElementsByTagName('li')
        for (var i=0;i<a.length;i++){
            if (i%2==0){
                document.getElementsByTagName('li')[i].style.backgroundColor=raRGb()
            }
        }
    }
</script>

paidaboluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的dom对象初识

首先了解一下，下列的定义方便理解文档：一个网页可以称为文档节点：网页中的所有内容都是节点（标签、属性、文本、注释等）元素：网页中的标签属性：标签(元素)的属性获取元素的方式1、根据id获取元素vardiv1=document.getElementById("box1");2、通过类名获取元素varp1Arr=document.getElementsByClassName("p1");console.log(p1Arrins...
复制链接

扫一扫