一、dom概念
概念:DOM全称Document Object Model(文档对象模型),是一种用于HTML和XML文档的编辑接口,给文档提供可一种结构化的表示方法,可以修改文档的内容和结构，DOM开发中主要用于操作元素
二、获取元素
1.根据id获取
getElementById 返回元素对象(获取到匹配的第一个元素)
var boxDom = document.getElementById('box')2.根据类名获得
getElementByClassName 返回元素的对象集合
var titleDom = document.getElementsByClassName('title')3.通过标签名获取
通过标签名获取，返回带有指定标签名的对象集合 getElementByTagName
var pDom = document.getElementsByTagName('p')4.选择器获取
-
获取指定元素的第一个对象
document.querySelector('选择器')
-
获取指定元素对象集合
document.querySelectorAll('选择器')
5.特殊元素获取
获取body
var bodyDom = document.body
获取html
var htmlDom =document.documentElement;
三、事件
1.dom事件类型
这里以click事件为例
var btn = document.querySelector("button");btn.onclick = function () {};2.dom.addEventListener事件类型
var divDom = document.querySelector(".box");console.log(divDom);divDom.addEventListener("click", function () {});3.<标签名 οnclick="方法">确定</标签名>
<标签名 onclick="方法">确定</标签名>
<script>function divClick() {alert("别骂了别骂了");}
</script>四、操作元素
:JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用Dom操作元素来改变元素里面的内容、属性等.
事件和操作元素都是对标签进行操作的
1.改变获取元素的内容
-
修改获取文本内容
innerText
-
修改获取标签文本
innerHTML
var title = document.querySelector('h1')var btn = document.querySelector('button')btn.onclick = function(){title.innerText = '<a href="">别笑了</a>'title.innerHTML = '<a href="">别笑了</a>'console.log(title.innerHTML);console.log(title.innerText);}2.修改获取元素属性
dom.属性名 = 修改值
3.修改样式属性
dom.style.样式属性 = 值
适用于较少的样式修改
4.使用className修改样式属性
dom.className = ' 值 '
5.HTML标签自定义属性
目的:为了保存属性并使用的数据
- 设置属性:setAttribute('属性名','值')
- 获取属性getAttribute('属性名')
五、节点操作
每个html元素是元素节点,html元素内的文本是文本节点,每个html属性是属性节点
| parentNode | 获取最近的父节点 |
| childNodes | 获取所有的子节点 |
| firstElementChild | 获取第一个子节点 |
| lastElementChild | 最后一个子节点 |
| previousElementSibling | 上一个兄弟 |
| nextElementSibling | 下一个兄弟 |
1.创建节点
document.createElement("标签名")
var newli = document.createElement("li");2.添加节点
添加的位置.appendChild(添加的节点)
3.删除节点
选择.removeChild(节点)
4.复制节点/克隆节点
cloneNode(true)：克隆整个节点包括里面的内容
cloneNode(false)：
)
