前端学习6——自学习梳理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63125992/article/details/140674803

dom操作：让js和Html真正交互起来

dom（document object model）

内含利用dom操作进行河北大学网页的简单设计()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- defer延迟加载 只适用于外引-->
    <script src="js/dom操作.js" defer></script>
    <link rel="stylesheet" href="css/下拉框样式.css">

    <style>
        .aaa {
            background: red;
            color: blue;
        }
    </style>

    <!-- <script>
        // 延迟加载
        window.onload = function() {
            var aa = document.querySelector("div")
            console.log(aa)
        }
    </script> -->
</head>

<body>

    <div></div>

    <!-- <div id="test" class="demo">hello</div>
    <div class="demo">hello</div>
    <span class="demo">demo</span>
    <span class="demo">demo</span>
    <p class="demo">hihih</p>
    <p class="demo">hihih</p>
    <h2>hh</h2> -->



    <!-- <div class="demo">
        <ul>
            <li>hello1</li>
            <li>hello2</li>
            aaaaaaa
            <li id="test">
                <p>hhhh</p>
                <h2>aaaa</h2>
                <span>tttt</span>
            </li>
            bbbbbbb
            <li>hello4</li>
            <li>hello5</li>
        </ul>
    </div> -->




    <!-- <div class="parent">
        <h3>aaa</h3>
        <span>demo</span>
        <p>ccc</p>
    </div> -->



    <!-- 下拉框开始 -->
    <div class="container">
        <ul class="main">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">学校概况</a>
                <ul>
                    <li><a href="#">学校简介</a></li>
                    <li><a href="#">学校章程</a></li>
                    <li><a href="#">历任领导</a></li>
                    <li><a href="#">现任领导</a></li>
                    <li><a href="#">校园风光</a></li>
                </ul>
            </li>
            <li>
                <a href="#">机构设置</a>
                <ul>
                    <li><a href="#">学校简介</a></li>
                    <li><a href="#">学校章程</a></li>
                    <li><a href="#">历任领导</a></li>
                    <li><a href="#">现任领导</a></li>
                    <li><a href="#">校园风光</a></li>
                    <li><a href="#">历任领导</a></li>
                    <li><a href="#">现任领导</a></li>
                    <li><a href="#">校园风光</a></li>
                </ul>
            </li>
            <li>
                <a href="#">学科专业</a>
                <ul>
                    <li><a href="#">学校简介</a></li>
                    <li><a href="#">学校章程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">招生信息</a>
                <ul>
                    <li><a href="#">学校简介</a></li>
                    <li><a href="#">学校章程</a></li>
                    <li><a href="#">历任领导</a></li>
                    <li><a href="#">现任领导</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- 下拉框结束 -->

</body>

</html>

// document object model
// 增删改查

// 一、查找
// 1、根据id值查找元素 getElementById() 返回的是符合条件的第一个对象
// var aa = document.getElementById("test")
// 2、根据class值查找元素  getElementsByClassName() 返回的是符合条件的对象组成的数组
// var aa = document.getElementsByClassName("demo")
// 3、根据元素名称查找元素  返回的是符合条件的对象组成的数组
// var aa = document.getElementsByTagName("h2")   //"div"
// 4、根据选择器查找元素  querySelector() 返回的是符合条件的第一个对象
// var aa = document.querySelector("div")
// 5、根据选择器查找元素 querySelectorAll() 返回的是符合条件的对象组成的数组
// var aa = document.querySelectorAll("div")

// console.log(aa)

// 根据关系做查找
// var aa = document.getElementById("test")

// 找父亲：parentElement parentNode
// 找孩子：children childNodes
// 第一个孩子：firstElementChild  firstChild
// 最后一个孩子：lastElementChild  lastChild
// 上一个元素:previousElementSibling  previousSibling
// 下一个元素：nextElementSibling nextSibling
// console.log(aa)
// console.log(aa.nextSibling)



//二、修改

// var aa = document.querySelector("div")
// console.log(aa)
// console.dir(aa)

// 1、改内容
// innerHTML把修改的内容当作标签处理
// innerText 当作文本处理
// value 修改收集用户信息的标签值
// aa.innerHTML = "<span>hhh</span>"
// 2、改属性
// 原生属性 对象.属性
// aa.className = 'hhhh'
// aa.id = 'aaaa'
// 自定义属性 设置属性setAttribute(属性名，属性值)  获取属性值 getAttribute(属性名)
// aa.setAttribute('index', 'aaaaaaaaa')
// console.log(aa.getAttribute("index"))
// 3、改样式 对象.style.属性 = 值
// aa.style.color = "blue"
// aa.style.background = "red"
// aa.style.fontSize = "50px"
// aa.style.cssText = "color:blue;background:red;font-size:60px"
// aa.className = 'aaa'



// 三、删除 父级元素调用removeChild(目标元素)进行删除

// var father = document.querySelector("body")
// var aa = document.querySelector("div")
// father.removeChild(aa)

// var aa = document.querySelector("div")
// aa.parentElement.removeChild(aa)



// 四、添加
// 1、创建元素 
// ①、创建元素 createElement()
// var newNode = document.createElement("div")
// console.log(newNode)
// newNode.innerHTML = '新添加的元素'
// newNode.style.cssText = "color:blue;background:red;font-size:60px"
// newNode.id = 'ppp'
// ②、复制元素 cloneNode()  false浅复制 true复制全部
// var demo = document.querySelector(".demo")
// var newNode = demo.cloneNode(true)

// 2、添加元素
// ①、appendChild()添加在子元素的最后一个位置
// ②、insertBefore(新元素,目标位置元素)添加到指定元素前边
// ③、replaceChild(新元素,被替换掉的元素) 替换指定元素
// var aa = document.querySelector(".parent")
// var span = document.querySelector("span")

// aa.appendChild(newNode)
// aa.insertBefore(newNode, span)
// aa.replaceChild(newNode, span)


















// eg： 下拉框
// var li_list = document.querySelectorAll(".main>li")
// console.log(li_list)
// for (var i = 0; i < li_list.length; i++) {
//     li_list[i].onmouseenter = function() {
//         if (this.querySelector("ul")) {
//             this.querySelector("ul").style.display = 'block'
//         }

//     }
//     li_list[i].onmouseleave = function() {
//         if (this.querySelector("ul")) {
//             this.querySelector("ul").style.display = 'none'
//         }

//     }
// }

下拉框样式.css

* {
    margin: 0;
    padding: 0;
}


/* 颜色的表示方式：
1、英文名称 pink red yellow
2、# 六位十六进制的数据表示颜色  0~f  三原色混合 红 绿 蓝 
3、rgb(red, green, blue)  0~255 三原色混合 红 绿 蓝
4、rgba(red, green, blue,alpha)  0~255 三原色混合 红 绿 蓝  alpha透明度 0-1
*/

.container {
    background: #48dbfb;
}

.main {
    width: 50%;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
}

.main>li {
    padding: 5px;
    list-style: none;           
    position: relative;
}

.main li {
    list-style: none;           /*列表样式去掉*/
}

.main li a {
    color: black;
    /* 去掉下划线 */
    text-decoration: none;
}

.main ul {
    /*释放空间*/
    position: absolute;
    /* 元素隐藏 none  显示bolck*/
    display: none;     
    background: #48dbfb;
}