目录
DOM操作 ——文档对象模型
DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口 把文档中的代码翻译成一个对象模型
在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象 这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等
1.只有一个根节点document
2.除了根节点外所有节点都有唯一的一个父节点
3.document是window对象的属性
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象 BOM操作会在接下来的知识点讲到 它不属于标准的接口 但是浏览器厂商都提供了几乎一样的功能
5.元素的属性也是独立节点 （对象），叫属性节点 但是不是元素节点的子节点
DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7) 注释节点 Node.COMMENT_NODE(8) 文档节点 Node.DOCUMENT_NODE(9) 文档类型节点 Node.DOCUMENT_TYPE_NODE(10) 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11) DTD声明节点 Node.NOTATION_NODE(12)
下面两行代码相等 window.document console.log(document)
一、获取元素的方式
1、系统提供的方法
获取出来是一个对象
//旧方法
document.getElementById(box) //id="box" 写box 有一样的id，获取到的是第一个
//getElementById的速度最快，所以常用。如果没有就返回null
document.getElementsByClassName(box) //class="box" 写box
//如果没有就返回空类数组
document.getElementsByName()idcard //input标签中的nmae="idcard" 写idcard
//如果没有就返回空类数组
document.getElementsByTagName(div) //直接写div标签
//如果没有就返回空类数组
//H5出的新方法
document.querySelector(#box) //id="box" 写#box class="box" 写 .box
//符合就返回符合选择器的第一个元素，不符合就返回null
document.querySelectorAll(.box)
//符合就返回符合选择器的所有元素，不符合就返回[]
//不建议使用 ， 直接使用标签的id作为节点对象引用上面有的方法不能使用数组的forEach函数，所以可以用for循环代替，或者用Aarry.from来转为数组，再调用。
2、系统提供的直接获取的方式
除了body 其他不怎么用 看你自己实际项目
document.body //body标签
document.forms //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址
3、通过关系获取
html的父元素是null html的父节点是document
//父级 父元素和父节点是同一个
var re=document.getElementById("div1").parentElement//父元素
var re=document.getElementById("div1").parentNode//父节点
console.log(re)//子级 子元素和子节点不一定是同一个
var son1=document.getElementById("box1").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes //返回值是子节点们 没有返回空数组
console.log(son1)
//子节点们标签与标签之间的空处也算子节点（还包含了注释、文本节点等）（所以子元素有3个，它的子节点可能是7个）//兄弟
var re = document.getElementById("box4").nextSibling//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("box3").previousSibling//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling //上一个兄弟元素 没有返回null
console.log(re) var son1=document.getElementById("box1").firstChild //第1个子节点
var son2=document.getElementById("box1").firstElementChild //第1个子元素
var son1=document.getElementById("box1").lastChild //最后一个子节点
var son2=document.getElementById("box1").lastElementChild //最后一个子元素
var son1=box.children[box.children.length-1] //最后一个子元素
var son2=box.childNodes[box.childNodes.length-1] //最后一个子节点//父元素中的第几个子元素/节点
var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点
//获取自己是父元素中的第几个子元素/节点
//自己实现这个方法:调用者是父元素中的第几个元素 .index()
Object.prototype.index2=function() {
console.log(this)
var arr=this.parentElement.children
for (let i = 0;i<arr.length;i++) {
if(this==arr[i]){
return i
}
}
}
var index=document.getElementById("box4").index2()
console.log(index)二、操作元素的属性——点击事件操作页面
<div id="box">hello</div>
<input type="text" id="email" value="">
<div id="box2" contenteditable="true">123</div>
<img id="img1" src="./img/10.png" alt="./">
<a id="a1" href="//www://www.baidu.com">img</a>
<button id="btn">点击</button>
<script>
var btn1 = document.getElementById("btn")
btn1.onclick = function fn() {
var boxx = document.getElementById("box")
boxx.innerHTML = "<h1>666</h1>"
var emaill = document.getElementById("email")
emaill.value = "hai"
var box2x = document.getElementById("box2")
box2x.innerText = "890"
var img1g = document.getElementById("img1")
img1g.src = "./img/11.png"
var a11 = document.getElementById("a1")
a11.href = "https://fanyi.youdao.com/"
box.id=""
box.className="" //不是class，因为class是关键字
}
</script>var a=box.style.color="red" //这里写字符串
三、文档树中的节点们进行——增删改查
//文档树中的节点们，是可以用JS进行 增删改查
//创建元素：这个元素不会渲染到页面上，它不在DOM中
var box2 = document.createElement("div") //传入的字符串 是标签的名字
//添加类名
//1、添加多个类名 : 只有box2 box3 没有两个box3
box2.classList.add("box2")
box2.classList.add("box3")
box2.classList.add("box3")
//2、添加单个类名，多个类名不建议使用这个方法
box2.className = "box2 box3" //这样写可以用下面两行来写
box2.className = "box2"
box2.className = box2.className + " box3"
//删除
box2.classList.remove("box2")
//添加到文档树中的末尾，x.appendChild(y) 把y节点对象添加到x节点中，作为它的子元素
box.appendChild(box2) //box2是子元素
//bug：现在box2里只有666，没有box3了
box3.className = "box3"
box2.appendChild(box3) //box3是子元素
box2.innerHtml = "6666" //6666会把box2的所有内部的元素全部覆盖了
//解决方案1：
//创建一个元素，把666作为它的innerHTML,然后把它添加到box2
//解决方案2：
// box2.innerHTML=box2.innerHTML+"666"
box2.innerHTML + "666"
//添加子元素的另一种方法
box2.innerHTML += "<h1>666</h1>"添加 ： insertBefore
<div class="box"> <div class="box2">hello1</div>//666就加在了这个后面 <div class="box2">hello2</div> </div> <script> var box=document.querySelector(".box") var a1=document.createElement("h1") a1.innerHTML="666" //将a1添加到box的下标为1的位置 box.insertBefore(a1,box.children[1]) </script>
四、克隆 删除
//克隆 删除
btn.onclick = function () {
//一：删除元素
//1、父亲删儿子
var box=document.querySelector("#box")
box.parentElement.removeChild(box)
//2、自己移除
var box=document.querySelector("#box")
box.remove()
//3、偷懒移除——清空自己
//(一般用在：（百度搜索条下拉瀑布）百度输入框的提示，内容和外边框的变化)
var box=document.querySelector("#box")
box.parentElement.innerHTML=""
//二：克隆
var box = document.querySelector("#box")
var box2 = box.cloneNode(true) //true：连同box的后代元素和所有的事件一起克隆。不写true，就克隆元素，不克隆事件等
box.appendChild(box2)
//box里面装了一个子元素，长得和box一样
//btn是页面上的标签
box.appendChild(btn) //写了这个后，将转移到box的子元素里，位置也变了，原来的也不在了
var btn1 = btn.cloneNode()
box.appendChild(btn1) //这个时候，原来的btn还在，box下面也加了btn
}五、节点对象、业务设计
1、只有新创建，然后添加进页面才会出现，否则就是移动节点
2、重点：如何把所有的JSON数据写为网页 （业务：类似于新浪微博）
JSON数据：是指JS数据表现为对象
3、开关思想
需求：事件会在触发时重新执行一次函数
设计思想：函数作用域外，设置一个布尔变量，每次执行时要改变变量的布尔值为反，然后id-else做分支
4、CSS半透明-opcity bgc-rgba
CSS种的垂直水平居中
5、信息录入系统-思维
div里面不放td
扫一扫
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
