学习js第十天（DOM上）

Mystic998

已于 2022-09-06 18:53:48 修改

阅读量113

点赞数

文章标签： javascript 学习前端

于 2022-09-03 23:14:02 首次发布

本文链接：https://blog.csdn.net/qq_59490759/article/details/126680263

版权

DOM:Document Object Model文档对象模型（就是操作html中标签的一些能力）

可以操作的内容：

获取一个元素

移除一个元素

创建一个元素

向页面里面添加一个元素

给元素绑定一些事件

获取元素的属性

给元素添加一些css样式

...

DOM的核心对象就是document对象,它是浏览器内置的一个对象，里面存储专门用来操作元素的各种方法，页面中的标签我们通过js获取后就把这个对象叫做DOM对象

document对象：即文档对象。document对象是window对象中的子对象。document对象除了write()方法外，跟其他对象一样，也有自身一套属性和方法。

1、document对象属性

属性	说明
title	文档标题，即title标签内容
URL	文档地址
fileCreateDate	文档创建日期
fileModifiedDate	文档修改时间（精确到天）
lastModified	文档修改时间（精确到秒）
fileSize	文档大小
fgColor	定义文档的前景色
bgColor	定义文档的背景色
linkColor	定义“未访问”的超链接颜色
alinkColor	定义“被激活”的超链接颜色
vlinkColor	定义“访问过”的超链接颜色

2、document对象方法

方法	说明
document.write()	输入文本到当前打开的文档
document.getElementById()	获取某个id值的元素
document.getElementsByName()	获取某个name值的元素，用于表单元素
document.getElementsByTagName()	获取某标签名的元素组，
document.getElementsByClassName()	获取某类名的元素组
querySelector	按照选择器的方式获取元素
querySelectorAll	按照选择器的方式获取元素

querySelector和querySelectorAll：

相同点：都是按照选择器的方式获取元素

区别：

querySelector只能获取一个元素，且是页面中第一个满足条件的元素；

querySelectorAll可以获取所有满足条件的元素，以一个伪数组的形式返回，获取的是一组数据，也是需要索引来获取到准确的每一个DOM元素

在浏览网页的时候，我们经常看到不少网页标题在闪动。下面是‘网页动态标题’

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //定义全局变量，用于标识
        var flag = 0;
        window.onload = function () {
            //定时器
            setInterval("titleChange()", 1000);
        }
        //定义函数
        function titleChange() {
            if(flag==0)
            {
                document.title = "★☆★Javascript学习网★☆★";
                flag = 1;
            }
            else
            {
                document.title = "☆★☆Javasctipte学习网☆★☆";
                flag = 0;
            }
        }
    </script>
</head>
<body>
</body>
</html>

操作元素内容：改变元素内容
p.innerHtml="<h1>Html内容</h1>";
p.innerText="纯文本内容";
p.value = "表单内容";

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。

innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容。即使指定的是HTML文本，它也会认为是普通文本而原样输出。

操作元素css样式：style行内样式，如：div.style.backgroundColor='red'

注意：属性名要用驼峰命名法fontSize、、

操作属性：

获取元素的某个属性（包括自定义属性）=>getAttribute('属性名')

设置元素的某个属性（包括自定义属性）=>setAttribute('属性名','属性值')

移除元素的某个属性（包括自定义属性）=>removeAttribute('属性名')

案例：选项卡

需求：点击上面的选项，下面对应区域显示内容

实现原理：绑定点击事件，onclick

确定选项 this关键字

清除所有样式，className=‘’

设置选中样式添加类名，单独设置样式

动态添加索引号，确定选项对应区域

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            width: 300px;
            height: 50px;
            display: flex;
        }

        ul,
        li {
            list-style: none;
        }

        ul li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            border-right: 1px solid #fff;
        }
        ul li:hover{
            cursor: pointer;
        }
        ol {
            position: relative;
        }

        ol li {
            width: 300px;
            height: 300px;
            position: absolute;
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }
        ul .active{
            background-color: skyblue;
        }
        ol .on{
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li class="on" style="background-color: purple;">选项1</li>
        <li style="background-color: red;">选项2</li>
        <li style="background-color: green;">选项3</li>
    </ol>
    <script>
        let ulEles=document.querySelectorAll('ul>li')
        let olEles=document.querySelectorAll('ol>li')

        for(let i=0;i<ulEles.length;i++){
            ulEles[i].setAttribute('index',i)//动态添加索引号
            ulEles[i].onclick=function(){
                clearStyle()//清除所有样式
                this.className='active'//设置选中选项样式
                let index=this.getAttribute('index')
                olEles[index].className='on'

            }

            
        }
        function clearStyle(){
            for(let i=0;i<ulEles.length;i++){
                ulEles[i].className=''
                olEles[i].className=''
            }
        }
    </script>
</body>

</html>