DOM
DOM
什么是dom
document object modle 文档对象模型整个文档就是一颗树
上图可知，在HTML当中，一切都是节点：
-
元素节点：HTML标签。
-
文本节点：标签中的文字（比如标签之间的空格、换行）
-
属性节点：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
在页面上还有一些动作效果:
根据人的行为改变的 点击 鼠标悬浮
自动在改变的
js是怎么给前端的web加上动作的呢?
1.找到对应的标签
2.给标签绑定对应的事件
3.操作对应的标签
查找标签
直接查找
var a = document.getElementById('baidu') //直接返回一个元素对象
console.log(a)
var sons = document.getElementsByClassName('son') //返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象
var divs = document.getElementsByTagName('div') //返回元素组成的数组
console.log(divs)
间接查找
找父亲
var a = document.getElementById('baidu')
console.log(a)
var foodiv = a.parentNode //获取到父节点的对象
找儿子
var foo= document.getElementById('foo')
foo.children //获取所有的子节点,返回一个数组
foo.firstElementChild //获取第一个子节点
foo.lastElementChild //获取最后一个子节点
找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling //找下一个兄弟 返回一个对象
son1.previousElementSibling //找上一个兄弟 返回一个对象
操作本身的标签
标签的创建
var obj = document.createElement('标签名') // a div ul li span
obj就是一个新创建出来的标签对象
标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后
父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前
标签的删除
父节点.removeChild(要删除的子节点)
子节点1.parentNode.removeChile(子节点2)
标签的替换
父节点.replaceChild(新标签,旧儿子)
标签的复制
节点.cloneNode() //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
节点的属性操作
节点对象.getAttribute('属性名')
节点对象.setAttribute('属性名','属性值')
节点对象.removeAttribute('属性名')
节点的文本操作
节点对象.innerText = '只能写文字'
节点对象.innerHTML = '可以放标签'
节点的值操作
elementNode.value 适用于以下标签，用户输入或者选择类型的标签：input 、select 、textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
节点的类操作
className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
事件
JS是以事件驱动为核心的一门语言
事件的三要素：事件源、事件、事件驱动程序
- 事件源：引发后续事件的html标签。
- 事件：js已经定义好了（见下图）。
- 事件驱动程序：对样式和html的操作。也就是DOM
代码书写步骤如下：
（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作
代码举例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
onscroll事件
window.onscoll 在页面的滚动条滚动的时候触发的事件
document.documentElement.scrollTop 针对获取浏览器的垂直滚动条的位置
select的onchange事件
select对象.options.selectedindex 被选中的选项在options中的索引位置
浙公网安备 33010602011771号