JS (DOM)

最新推荐文章于 2024-06-16 12:11:30 发布

章鱼Cc_yoo

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量59

点赞数

文章标签： javascript p2p linq

本文链接：https://blog.csdn.net/Cc200171/article/details/124747848

版权

1.dom是什么，你是怎么理解dom的？

document object model 文档对象模型

提供了很多对标前进行增删改查的操作

2.DOM操作

增
	1.新建	创建元素节点 createElement （标签名）
		直接设置属性 setAttribute（name，value）
		cloneNode（true、false） true包含子节点 false不包含
	2.插入	拼接节点 appendChild（）
		插入节点 insertBefore（new，old）
	3.删	删除子节点 removeChild（）
		删除属性节点 removeAttributeNode（）
	4.改	替换节点 replaceChild（new，old）需要用父级来调用
		修改属性值 setAttribute（）
	5.查	getElementById（）通过id名获取元素
		getElementsByTagName（）通过标签名获取元素
		getElementsByClassName（）通过class名获取元素
		getElementsByName（）表单常用，通过表单的name名获取元素
		querySelector（）通过css选择器获取元素
		querySelectorAll（）通过css选择器获取元素
		1.获取下一个兄弟节点
		nextSibling 有兼容问题
		nextElementSibling 只获取元素节点
		2.获取上一个兄弟节点
		previousSibling 有兼容问题
		previousElementSibling 直接获取元素节点
		3.获取子节点
		（1）第一个子节点
		firstChild firstElementChild
		（2）最后一个子节点
		lastChild lastElementChild
		4.获取子节点
		children
		5.获取父级节点
		parentNode

案例 1 Tab切换

<!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>Tab切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .selector{
            width: 400px;
            height: 200px;
            background-color: deepskyblue;
            border: 6px solid deepskyblue;
        }
        aside{
            width: 100px;
            height: 200px;
            float: left;
        }
        aside p {
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: #fff;
            text-align: center;
        }
        aside .now, aside p:hover{
            background-color: #fff;
            color: deepskyblue;
            cursor: pointer;
        }
        main{
            width: 300px;
            height: 200px;
            float: left;
            background-color: #fff;
        }
        main p {
            width: 94%;
            height: 50px;
            line-height: 50px;
            box-sizing: border-box;
            border-bottom: 2px solid deepskyblue;
            text-indent: 20px;
            margin: 0 auto;
        }
        main div {
            width: 94%;
            height: 150px;
            margin: 0 auto;
            display: none;
        }
        main div.xy{
            display: block;
            background-color: tomato;
        }
        main div.sh{
            background-color: gold;
        }
        main div.sg{
            background-color: hotpink;
        }
        main div.hl{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="selector">
        <aside>
            <p class="now">西游</p>
            <p>水浒</p>
            <p>三国</p>
            <p>红楼</p>
        </aside>
        <main>
            <p class="title">人与自然</p>
            <div class="xy"></div>
            <div class="sh"></div>
            <div class="sg"></div>
            <div class="hl"></div>
        </main>
    </div>
</body>
<script>
    // 点击不同的选项卡，右侧的标题切换，右侧的内容块切换

    var ps = document.querySelectorAll("aside p");
    var pTitle = document.querySelector(".title");
    var ds = document.querySelectorAll("main div");

    var index = 0; //now的下标
    // 1.在标签内部添加任意属性来存储数据
    // 2.使用数组
    var arr = ["人与自然", "105+3", "all men", "only  one"];

    // 添加点击事件
    for (var i=0; i<ps.length; i++) {
        // 为每一个选项卡添加自定义属性 index
        ps[i].index = i;
        ps[i].onclick = function() {
            // 点击的就是显示的内容
            if(this.index === index) {
                return ;
            }

            // 修改now
            ps[index].className = "";
            this.className = "now";
            // 修改显示的div内容
            ds[index].style.display = "none";
            ds[this.index].style.display = "block";
            // 修改title的值
            pTitle.innerHTML = arr[this.index];
            // 修改index的值
            index = this.index;
        }
    }
</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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            height: 60px;
            line-height: 60px;
            color: #fff;
            background-color: #666;
            display: flex;
            justify-content: space-around;
            position: relative;
        }
        p{
            width: 80px;
            height: 60px;
            text-align: center;
            z-index: 1;
        }
        .slider{
            width: 80px;
            height: 60px;
            background-color: rgba(255,0,0,.45);
            position: absolute;
            transition: .3s;
        }
    </style>
</head>
<body>
    <nav>
        <p>春节</p>
        <p>元宵节</p>
        <p>清明节</p>
        <p>端午节</p>
        <p>七夕节</p>
        <p>中秋节</p>
        <p>重阳节</p>
        <p>除夕</p>
        <div class="slider"></div>
    </nav>
</body>
<script>
    // 获取节日标签
    var ps = document.querySelectorAll("p");
    var dSlider = document.querySelector(".slider");


    // 先把slider定位到第一个节日标签
    dSlider.style.left = ps[0].offsetLeft + 'px';

    // 为p标签添加鼠标移入事件
    for(var i=0; i<ps.length; i++) {
        ps[i].onmouseenter = function() {
            dSlider.style.left = this.offsetLeft + 'px';
        }
    }
</script>
</html>

案例3 clock

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1200px;
            height: 500px;
            box-shadow: 3px 3px 5px gray;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .wrap>div {
            position: relative;
            width: 140px;
            height: 200px;
            /* background-color: pink; */
            margin: 2px;
            margin-top: 40px;
        }

        .wrap>div:nth-of-type(3) {
            margin-left: 10px;
        }

        .wrap>div:nth-of-type(4) {
            margin-right: 10px;
        }

        .wrap>div .circle {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: deepskyblue;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div n="-1">
            <!-- <div class="circle"></div> -->
        </div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
    </div>
</body>
<script src="../js/number.js"></script>
<script>
    var ds = document.querySelectorAll(".wrap>div");
    var timer = null;

    // 开启timer
    timer = setInterval(function () {
        var date = new Date;
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var arr = [parseInt(h / 10), h % 10,
        parseInt(m / 10), m % 10,
        parseInt(s / 10), s % 10];
        setNumbers(arr);
    }, 1000)

    // arr = [n,n,n,n,n,n] 时间
    function setNumbers(arr) {
        for (var i = 0; i < ds.length; i++) {
            // 判断内容是否一样
            if (arr[i] === ds[i].getAttribute('n') / 1) {
                continue;
            } else {
                ds[i].setAttribute('n', arr[i]);
            }
            // 先把之前内容清空
            ds[i].innerHTML = '';
            showNumberWithDiv(ds[i], arr[i]);
        }
    }
    setNumbers([0, 0, 0, 0, 0, 0]);

    // 把数字显示在div中
    function showNumberWithDiv(div, n) {
        var arr = nums[n]; //拿到显示数字的数组
        for (var i = 0; i < arr.length; i++) {
            // 排数
            var array = arr[i];
            for (var j = 0; j < array.length; j++) {
                var d = document.createElement("div");
                d.className = "circle";
                d.style.left = array[j] * 20 + "px";
                d.style.top = i * 20 + "px";
                div.appendChild(d);
            }
        }
    }

</script>

</html>