DOM介绍DOM全称：document object model ==> 文档对象模型文档：html文档例如，改变标签

DOM全称：document object model ==> 文档对象模型文档：html文档

例如，改变标签的背景颜色，让标签移动产生动画。。。。

例如：

window.document.write();
window.document.bgColor="red";

DOM的学习，就是学习如何使用js的对象结构操作html文档 html文档都是由标签组成的，dom就是在学习如何用js操作标签标签的组成：

标签名
内容
属性
样式
大小
位置
子标签
父标签
兄弟标签
类名

2、html基本结构的操作：

document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
document.documentElement : 可以获取html元素及其所有内容
document.head : 可以直接获取head元素
document.title : 可以直接获取title的文本

3.获取标签，元素

id名可以代表这个标签，但是它有缺陷，不能使用关键字。不影响修饰样式无论他的id名是什么，都要能获取到才行

获取标签

  window.document.querySelector(css选择器) - 返回满足选择器的第一个标签

第一个标签

var ul = document.querySelector('#var')
console.log(ul);

var ul = document.querySelector('.uu')
console.log(ul);var ul = document.querySelector('ul')  
console.log(ul);

var li = document.querySelector('ul li')
console.log(li);

   document.querySelectorAll(css选择器) - 返回所有满 足选择器的元素组成的集合
     var lis = document.querySelectorAll('ul li')
     console.log(lis);

集合可以遍历

 for (var a = 0; a < lis.length; a++) {
   console.log(lis[a]);
    lis[a].onclick = function() {
    console.log(666);

其他获取标签的方法


document.getElementById('id名') - 只能获取到一个标签
console.log( document.getElementById('var') );

 document.getElementsByClassName('类名') - 只要标签有这个类名，就都可以获取到
 console.log( document.getElementsByClassName('uu') );
 console.log( document.getElementsByClassName('uu')[0] );

document.getElementsByTagName('标签名')
 console.log( document.getElementsByTagName('ul') );
 console.log( document.getElementsByTagName('ul')[0] );

 document.getElementsByName('name属性的值')
 console.log( document.getElementsByName('myul') );

html基本结构标签

html标签
 console.log( document.documentElement )

body标签
 console.log( document.body );

 head标签
 console.log( document.head );

 网页标题
   console.log( document.title ); // 获取标签
    document.title = '这是我的网页' // 设置网页标题

获取元素

在js中，标签的id名，可以当做是变量，直接就能代表这个标签元素，但是，id名可以随便定义，但是变量名不能随便定义，所以使用id名代表标签是有风险的。所以需要通过方法来获取到标签元素，自己定义给变量，可以避免这种风险。

通过document获取节点

document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
// 上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）

使用css选择器获取元素：

documen.querySelector(css选择器); // 获取到匹配css的第一个元素
documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素

总结：


    获取普通标签
        document.querySelector('css选择器')
        document.querySelectorAll('css选择器')
    其他不常用的方法    
            document.getElementById()
            document.getElementsByClassName()
            document.getElementsByTagName()
            document.getElementsByName()
    获取html基本结构
        document.documentElement
        document.body
     
        document.head
        document.title

4.标签名和内容操作

获取标签
   var oDiv = document.querySelector('.box')
   获取标签名 ==>  标签.tagName   -->  返回大写的标签名
   console.log( oDiv.tagName );

内容操作
设置内容
文本内容
标签.innerText = 值  ==>  给标签设置内容
oDiv.innerText = '哈哈'
oDiv.innerText = '<b>哈哈</b>'

获取标签内容    标签.innerText
 console.log(oDiv.innerText);

   可以带标签的内容
     oDiv.innerHTML = '<b>哈哈</b>'
     console.log(oDiv.innerText);
     console.log(oDiv.innerHTML);

 表单标签的内容
    var ipt = document.querySelector('[name="username"]')
     console.log(ipt);

  标签.value
     console.log(ipt.value);
     ipt.value = '张三'

5.内容操作

语法：
    元素.innerHTML # 代表元素中的所有内容（包含标签）
    元素.innerText # 代表元素中的文本内容
    表单元素.value
    # 单标签操作内容其实就是在操作元素的属性

例：

<body>
<div id="box" introduce="区域"><p>我是盒子</p></div>
</body>
<script type="text/javascript">
    document.getElementById("box").innerText = "今天你要嫁给我";
    var text = document.getElementById("box").innerText;
    document.write(text);
    document.getElementById("box").innerHTML = "<a href='http://www.baidu.com'>百度</a>";
    var content = document.getElementById("box").innerHTML;
    console.log(content);

6.属性操作

1、标签属性

元素.setAttribute(属性名,属性值) # 设置元素的属性
元素.getAttribute(属性名); # 获取元素属性
元素.removeAttribute(属性名); # 删除元素属性

2、对象属性

元素.属性名 = 值;
console.log(元素.属性名);

例：

btn.onclick=function(){
    img.src = '2.jpg';
}

3、H5的自定义属性操作

当给标签添加属性以data-XXX开头时，H5提供了一个快速操作属性的api：

标签.dataset.XXX // 获取属性的值

4,

获取标签
var box = document.querySelector('.box')

// 设置属性
// 标签.setAttribute(属性名, 属性的值)
box.setAttribute('name', 'dd')
box.setAttribute('name', 'mydd')

// 获取属性的值
// 标签.getAttribute(属性名)
console.log( box.getAttribute('name') );
console.log( box.getAttribute('class') );

// 删除属性
// 标签.removeAttribute(属性名)
box.removeAttribute('name')

7.类名操作

var box = document.querySelector('.box')
var btn = document.querySelector('button')
// box.style.width = '200px'
// box.style.height = '200px'
// box.style.backgroundColor = '#f00'
// box.style.border = '2px solid #00f'
// box.style.margin = '0 auto'


标签.className = 值
标签.className

// 给box添加类名mybox
// console.log(box.className);
// box.className = 'mybox' // 重新设置class属性的值
// box.className = 'box mybox'
// box.className = ''

// 方便类名操作

标签.classList

// console.log(box.classList);
// 给box添加类名mybox
box.classList.add('mybox')

// 判断标签是否有mybox类名
// console.log( box.classList.contains('mybox') );

btn.onclick = function() {
  // 删除类名mybox
  // box.classList.remove('mybox')

  // 让某个类名在删除和添加之间切换
  box.classList.toggle('mybox')

8.页面卷去的距离

获取卷去的距离

语法：

document.documentElement.scrollTop

这个语法有兼容性问题，是文档兼容；文档有文档声明的时候能获取到，没有文档声明的时候就获取不到了

没有文档声明，需要使用另一种写法
document.body.scrollTop
    只适用于没有文档声明，有文档声明的时候就获取不到了
console.log(document.body.scrollTop);

兼容写法 --> 万能写法
var t = document.documentElement.scrollTop || document.body.scrollTop
 console.log(t);

卷去的距离也可以赋值 ---》 可以控制滚动条位置
  document.documentElement.scrollTop = document.body.scrollTop = 0

9、短路运算

短路运算是利用了短路的特性，让逻辑运算符中的并且&& 跟或者|| 进行赋值

// var a = false && true
// 逻辑运算不是一定会得到布尔值的
// var a = 0 && 1
// 也可以看做  false && true
// 左假 右真 整体假
/*
左假  右假  整体假

左真 右真  整体真
左真 右假  整体假
*/
// 其实逻辑运算的结果是他两边的数据中的其中一个

// 如果能进行到右边，就将右边的数据赋值给变量；如果没有进行到右边，就会将左边的数据赋值给变量
// console.log(a); // 0

// var b = 2 && 3;
// console.log(b); // 3

// var c = 5 && false
// console.log(c); // false

// var d = '' && 666
// console.log(d);

// var fn
// // if (fn) {
// //     fn()
// // }
// fn && fn()


// ||
/*
左真 右真 整体真
左真 右假 整体真

左假 右真 整体真
左假 右假 整体假
*/
// var a = 1 || 2;
// console.log(a); // 1

// var a = 0 || 2
// console.log(a); // 2

// var a = 0 || false
// console.log(a);

// var a = true || 666
// console.log(a);

var t = document.documentElement.scrollTop || document.body.scrollTop
// 如果有文档声明：
/*
左真 || 右假 整体真
*/
// 如果没有文档声明：
/*
左假 || 右真 整体真
*/
console.log(t);

利用逻辑运算中的&&和||让赋值操作变得更灵活，并带有选择性。

var 变量 = 数据1 && 数据2

当数据1为true，不能决定整个条件的结果，还需要进行到数据2，所以此时会将数据2赋值给变量。

当数据1为false，就已经知道整个条件的结果了，就没有必要进行到数据2了，所以此时会将数据1赋值给变量

var 变量 = 数据1 || 数据2

当数据1为true，就已经能决定整个条件的结果了，就没有必要进行数据2了，此时就将数据1赋值给变量

当数1为false，还不能决定整个条件的结果，需要进行到数据2，此时就会将数据2赋值给变量

案例：

随机点名
实时显示当前时间
全选全不选案例

10.动态创建表格

var arr = [{name:"name1 ",age:" ",sex:" ",intersting:" "},];
获取标签
var tbody = document.querySelector('tbody')
// 遍历数组
// arr.forEach(function(item, index) {
//     var tr = '<tr><td>' + (index + 1) + '</td><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.sex+'</td><td>'+item.skill+'</td></tr>'
//     // console.log(tr);
//     tbody.innerHTML += tr
//     /*
//     tbody.innerHTML += tr 简写
//     tbody.innerHTML = tbody.innerHTML + tr
//     第一次：
//     tbody.innerHTML = tbody.innerHTML(空) + tr(name1)
//     第二次：
//     tbody.innerHTML = tbody.innerHTML(空) + tr(name1) + tr(name2)
//     第三次：
//     tbody.innerHTML = tbody.innerHTML(空) + tr(name1) + tr(name2) + tr(name3)
//     */
// })

var html = ''
arr.forEach(function(item, index) {
    // var color = 'red'
    // if (index % 2) {
    //     var color = 'green'
    // }
    // html += '<tr style="background-color:' + color + ';">'

    if (index % 2) {
        html += '<tr style="background-color:green;">'
    } else {
        html += '<tr style="background-color:red;">'
    }
        html += '<td>' + (index + 1) + '</td>'
        html += '<td>' + item.name + '</td>'
        html += '<td>' + item.age + '</td>'
        html += '<td>' + item.sex + '</td>'
        html += '<td>' + item.skill + '</td>'
    html += '</tr>'
})
tbody.innerHTML = html

11.顶部悬浮

<div class="container top">
    <div class="content">
        这里是顶部
    </div>
</div>
<div class="container article">
    <div class="content"></div>
</div>
<div class="container footer">
    <footer class="content"></footer>
</div>
<!-- 回到顶部按钮 -->
<button class="totop">按钮</button>

<script>
// 获取顶部标签
// top是关键字，代表window
var myTop = document.querySelector('.top')
console.log(111, myTop);
var btn = document.querySelector('.totop')
// 滚动条事件
window.onscroll = function() {
    // 获取卷去的距离
    var t = document.documentElement.scrollTop || document.body.scrollTop
    console.log(t);
    // 判断卷去的距离是否大于350
    if (t >= 350) {
        // 让顶部显示出来
        myTop.style.position = 'fixed'
        myTop.style.left = 0
        myTop.style.top = 0
    } else {
        // 给标签设置为静态定位 - 取消固定定位 - 不再固定在顶部了
        myTop.style.position = 'static'
    }

    if (t >= 500) {
        btn.style.display = 'block'
    } else {
        btn.style.display = 'none'
    }
}

// 给回到顶部按钮添加点击事件
btn.onclick = function() {
    var timer = setInterval(function() {
        // 获取当前的值
        var t = document.documentElement.scrollTop || document.body.scrollTop
        // 让这个数字减小一点点
        t -= 20
        // 将减小的数字赋值给卷去的距离
        document.documentElement.scrollTop = document.body.scrollTop = t

        if (t <= 0) {
            clearInterval(timer)
        }
        console.log(111);
    }, 17)
}
</script>

12.距节日倒计时

例如：

<div class="box">
    距离国庆还有： <span>0</span> 天 <span>0</span> 小时 <span>0</span> 分钟 <span>0</span> 秒
</div>

<script>
// 获取所有标签
var spans = document.querySelectorAll('span')
daojishi()
function daojishi() {
    // 获取国庆的时间日期对象中的时间戳
    var guoqing = new Date('2023-10-1 0:0:0')
    guoqing = guoqing.getTime()
    // 获取当前的时间戳
    var now = new Date()
    now = now.getTime()
    // 求毫秒差
    var diff = guoqing - now
    // 根据毫秒差换算天、小时、分钟、秒
    var day = parseInt(diff / 1000 / 60 / 60 / 24)
    var hour = parseInt(diff / 1000 / 60 / 60) % 24
    var minute = parseInt(diff / 1000 / 60) % 60
    var second = parseInt(diff / 1000)  % 60
    // 将天、小时、分钟、秒放在对应的span标签中
    spans[0].innerText = day
    spans[1].innerText = hour
    spans[2].innerText = minute
    spans[3].innerText = second
}
// 设置定时器
setInterval(daojishi, 1000)

13.点击按钮切换图片操作


<button>切换</button> <br> <img src="./images/1.jpg" width="300" height="200" alt="转存失败，建议直接上传图片文件">

<script src="./js/utils.js"></script> //引入Js样式表
<script>
// 按顺序换
var btn = document.querySelector('button')
var img = document.querySelector('img')
// 定义初始值数字
var num = 1
// 按钮点击
btn.onclick = function() {
    // 让数字自增
    num++
    // 判断最大值
    if (num > 3) {
        num = 1
    }
    // 根据数字拼接图片路径
    var imgPath = './images/' + num + '.jpg'
    // 将图片路径设置给img标签
    img.setAttribute('src', imgPath)
}


// // 随机换
// var btn = document.querySelector('button')
// var img = document.querySelector('img')
// // 按钮点击
// btn.onclick = function() {
//     // 从1\~3之间获取随机数
//     var num = getRandom(1, 4)
//     // 根据数字拼接图片路径
//     var imgPath = './images/' + num + '.jpg'
//     // 将图片路径设置给img标签
//     img.setAttribute('src', imgPath)
// } </script>

14.点击切换网页背景颜色

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<script src="./js/utils.js"></script>
<script>
// 获取4个div
var divs = document.querySelectorAll('.box div')
// 遍历这4个div
for (var a = 0; a < divs.length; a++) {
    // divs[a] 代表每个div标签
    divs[a].style.backgroundColor = getColor()
    // 给每个div添加点击事件
    divs[a].onclick = function() {
        // 获取当前点击的这个div的背景颜色
        // getComputedStyle(divs[a])
        // console.log(a); // a不能代表当前div的下标

        // this是js中关键字 - 在事件函数中代表当前触发事件的这个标签
        // console.log(this);
        var color = getComputedStyle(this)['background-color']
        // 将颜色设置给body
        document.body.style.backgroundColor = color
    }
}

// console.log(a);
</script>