JavaScript基础案例（一）

最新推荐文章于 2024-07-12 16:27:40 发布

长毛女士

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量884

点赞数 13

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/2203_75920270/article/details/136308174

版权

案例一：随机抽奖

<div>
    <h1>一等奖：<span id="one">xxx</span></h1>
    <h3>二等奖：<span id="two">xxx</span></h3>
    <h5>三等奖：<span id="three">xxx</span></h5>
  </div>
 <script>
    //声明数组
    const personArr = ['ZZZ', 'AAA', 'CCC', 'DDD', 'EEE']
    //或取一个随机数当作数组下标
    const random=Math.floor(Math.random()*personArr.length)
    //获取元素 
    const one = document.querySelector('#one')
    //把数组下标的值写入到one
    one.innerHTML = personArr[random]
    //从数组里删除这个名字
    personArr.splice(random, 1)

    const random2=Math.floor(Math.random()*personArr.length)
    const two=document.querySelector('#two')
    two.innerHTML=personArr[random2]
    personArr.splice(random2,1)

    const random3 = Math.floor(Math.random() * personArr.length)
    const three = document.querySelector('#three')
    three.innerHTML = personArr[random3]
    personArr.splice(random3, 1)
  </script>
</body>

随着浏览器每次的刷新而随机获取不同的一二三等奖

DOM（Document Object Model）

DOM（Document Object Model）是将整个 HTML 文档中的的每一个标签元素视为一个对象，HTML文档中又包含了很多的属性和方法，为了实现网页特效以及用户交互，从而操作这些属性或者调用这些方法实现对 HTML 的动态更新。通俗讲 DOM 是用来动态修改 HTML 的，目的是开发网页特效及用户交互。

DOM树

DOM树（Document Object Model Tree）是指HTML文档中所有元素的层次结构。

例：

<!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>

</head>

</body>

</html>

DOM树从网页的根节点开始，逐级向下表示网页的结构。如上，根节点对应的是<!DOCTYPE html>标签，下面包着<html>标签，<html>包着<head>标签和<body>标签....这些节点可以相互包含和嵌套，形成一个树状结构,而DOM树直观的体现了标签与标签之间的关系。

DOM 节点

DOM节点是DOM树的组成部分，每一个节点都是DOM的一个对象。DOM节点主要分为元素节点（简单的理解就是HTML标签，eg：body、head、div...）、属性节点(标签中的属性，eg：a、class、id、type....)、文本节点(用于写文字内容的标签，eg：title、h1、p....)等。

document

document是专门用于DOM的一个内置对象，对象内又包含了很多的属性和方法

eg：

// 通过 write 方法向网页输出内容
document.write('Hello World!');

// 1. 通过 document 获取根节点
console.log(document.documentElement); //输出对应 html 标签

//获取dom对象

document.querySelector

获取dom对象

//querySelectorr获取满足条件的第一个元素

const one = document.querySelector('#one')

若：ul里面有很多li则const li = document.querySelector('li')获取到的是第一个li

//querySelectorAll获取满足条件的全部元素

const li = document.querySelectorAll('li')//获取到ul里面的所有li

除了以上的获取dom方法可以用getElementById和getElementsByTagName来获取dom元素，其中getElementById是用来通过元素的id属性来获取元素的方法，它返回匹配指定id的元素。因为id属性在文档中是唯一的，所以getElementById只返回一个元素。相比起querySelector他回更简单直接，但querySelector回更加常用。getElementsByTagName是用来获取指定标签名的所有元素的方法，它返回一个包含所有匹配标签名的元素的HTMLCollection对象。因为一个文档中可以有多个相同标签名的元素，所以getElementsByTagName返回一个包含多个元素的集合。