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;
}
