一. 什么是DOM?
元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
注意:DOM 是 Document Object Model(文档对象模型)的缩写。
二. DOM 节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
-
整个文档是一个文档节点
-
每个 HTML 元素是元素节点
-
HTML 元素内的文本是文本节点
-
每个 HTML 属性是属性节点
-
注释是注释节点
<script>
// 当浏览器加载html文件的时候,会创建一个document对象
// document对象是浏览器提供的,专门用来操作当前页面
// 把API理解为方法
// 节点有点有哪些
// HTML 文档中的所有内容都是节点:
// 文档节点:表示整个文档
// 元素节点:表示标签
// 属性节点:表示标签的属性
// 文本节点:表示标签中的文本内容(空格tab 这些都是文本节点)
// 注释节点:表示注释
</script>
三.节点之间的关系(了解,知识点)
节点树中的节点彼此拥有层级关系,我们可以使用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
-
在节点树中,顶端节点被称为根(root)
-
每个节点都有父节点、除了根(它没有父节点)
-
一个节点可拥有任意数量的子节点
-
同胞是拥有相同父节点的节点
四.获取元素节点
<div id="main">
<div class="box">
<p>段落内容</p>
</div>
<div class="box">
<p>段落内容</p>
</div>
<div class="box">
<p>段落内容</p>
</div>
</div>
<script>
// document对象是浏览器提供的,专门用来操作当前页面
// 1.获取你要更新的元素
// 获取元素
// 通过id获取元素
var box = document.getElementById('main')
console.log('box',box)
// 通过class去获取dom元素
var smallbox = document.getElementsByClassName('box')
// HTMLCollection 元素集合 得到是一个伪数组
console.log('smallbox',smallbox)
console.log('smallbox',smallbox[0])
// 获取标签
var p = document.getElementsByTagName('p')
console.log('p',p)
console.log('p',p[0])
还有可以获取到的特殊节点
<script>
// 获取整个文档
console.log(document.documentElement)
// 获取body
console.log(document.body)
// 获取title
console.log(document.title)
document.title='我是新的标题'
</script>
五. 修改节点
//1.修改元素内容
<p class="box">段落内容</p>
<p class="box">段落内容</p>
<p class="box">段落内容</p>
<script>
// 需求:修改p标签中的内容
// 1.获取p标签
// document.getElementsByTagName('p')[0] 返回的是一个元素对象
var p = document.getElementsByTagName('p')[0];
console.log('p',p)
// 2.修改p标签中的内容
// 获取p标签的内容
console.log(p.innerText)
// p.innerText ='修改后的值'
console.log(p.innerHTML)
// p.innerHTML ='通过innnerHtml修改的值'
// innerTex和innerHTML的区别
// innerText:获取标签中的内容
// innerHTML:获取标签中的内容,包括标签
// p.innerText = '<h1>我是h1标签<h1>'
// p.innerHTML = '<h1>我是h1标签<h1>'
// 动态拼接内容
p.innerText += '我是后拼上的内容'
</script>
-
innerText和innerHTML的区别
-
获取内容时的区别:
innerText会去除空格和换行,而innerHTML会保留空格和换行
-
设置内容时的区别:
innerText不会识别html,而innerHTML会识别。
通过 HTML DOM,我们能够访问 HTML 元素的样式对象
//改变css样式
<div class="box">
我是stan
</div>
<script>
// 需求我要把box里面的文字变成红色
// 1.获取元素
var box = document.getElementsByClassName('box')[0];
// 2.修改样式
console.log('box',box)
box.style.color='red';
// font-size
box.style.fontSize='40px';
</script>
//3.改变html属性
<div id="box" class="classBox" title="我是标题">
</div>
<script>
// 1.获取元素
var box = document.getElementById('box');
console.log(box.id)
console.log(box.title)
// 特殊的属性
console.log(box.className)
// 2.修改属性的值
box.title= '我是修改后的值'
box.title=''
// 第二种通过getAttribute setAttribute
console.log('通过方法获取属性值',box.getAttribute('id'))
// 设置(修改)属性
// box.setAttribute('id','newId')
box.setAttribute('title','我是他通过方法设置的title')
// removerAttribute删除属性
box.removeAttribute('title')
</script>
<div id="box" >
</div>
<script>
var box = document.getElementById('box');
// 通过.的方法添加标签原本不具有的属性的时候是添加到dom对象上了而不是标签上
box.aaa = '我是新添加的属性';
// 通过setAttribute方法添加标签原本不具有的属性的时候是添加到标签上了
box.setAttribute('bbb','我是bbb属性的值')
console.log('box',box)
</script>
六. 操作HTML元素
6.1输出到文档
输入到文档就是我们之前讲过的 document.write
作用:可以将任意字符串插入在文档中。
<script>
document.write("hello world");
document.write('<h1>哈哈</h1>')
</script>
如下是详情照片,我们再回顾一下
6.2这里再讲一个(旗帜法则)
<style>
img {
width: 600px;
height: 800px;
}
</style>
</head>
<body>
<img src="../img/秃子2.png" id="imgBox" alt="">
<script>
var img = document.getElementById('imgBox');
var flag = 1;
img.onclick = function () {
if (flag == 1) {
img.src = '../img/秃子2.png';
flag = 2;
} else if (flag == 2) {
img.src = '../img/微信图片.jpg';
flag = 3;
} else if (flag == 3) {
img.src = '../img/壁纸.jpg';
flag = 1;
}
}
</script>
</body>
简单理解来说就是,在放入页面的图片之中,你点击他的话能够切换为下一张图片 。如下所示。
视频
6.3创建节点以及追加节点
方法:document.createElement(tagName);
作用:根据标签名(tagName)创建新的 DOM 对象。
方法:document.createTextNode("文本");
作用:创建一个文本节点。
方法:parentElement.appendChild(newElement);
作用:追加到父元素内容的后面。
<div></div>
<!-- <p>
<span>1</span>
</p> -->
<script>
// 创建一个标签节点
var p = document.createElement('p');
console.log('p',p)
// 创建一个文本节点
// var text = document.createTextNode('hello world');
// console.log('text',text)
p.innerText = 'hello world';
// 当前标签的尾部追加节点
// p.appendChild(text);
document.body.appendChild(p);
</script>
6.4插入节点
方法:parentElement.insertBefore(newElement, targetElement)
作用:将新创建的元素(newElement)添加到目标元素(targetElement)前面
<div class="box">
<p class="pcon1">这是第一个p</p>
<p class="pcon2">这是第二个p</p>
<p class="pcon3">这是第三个p</p>
</div>
<script>
// parentElement.insertBefore(newElement, targetElement)
// newElement就是要插入的元素
// targetElement目标元素
var pcon2 = document.getElementsByClassName('pcon2')[0];//目标元素
// 创建一个标签节点
var sapn = document.createElement('span');
sapn.innerText = '这是新插入的span';
// 获取父元素
var box = document.getElementsByClassName('box')[0];
// 插入节点
box.insertBefore(sapn, pcon2);
</script>
注意:没有inertAfter这个方法。
6.5替换节点
方法:parentElement.replaceChild(newElement, targetElement)
作用:使用新元素替换目标元素
被替换的节点将从文档树种移除,同时要插入的节点占据其位置。
<div class="box">
<p class="pcon1">这是第一个p</p>
<p class="pcon2">这是第二个p</p>
<p class="pcon3">这是第三个p</p>
</div>
<script>
// parentElement.replaceChild(newElement, targetElement)
// newElement就是要替换的元素
// targetElement目标替换掉的元素
var pcon2 = document.getElementsByClassName('pcon2')[0];//目标元素
// 创建一个标签节点
var sapn = document.createElement('span');
sapn.innerText = '这是新插入的span';
// 获取父元素
var box = document.getElementsByClassName('box')[0];
// 节点
box.replaceChild(sapn, pcon2);
</script>
6.6删除节点
方法:parentElement.removeChild(childElement);
作用:从父元素(parentElement)中删除一个子元素(childElement)
<div id="box">
<p class="pcon1">这是第一个P</p>
<p class="pcon2">这是第二个P</p>
</div>
<div id="out">
<p>我是out里面的p</p>
</div>
<script>
//删除指定父元素下的指定子元素
//1.获取父元素
var box = document.getElementById('box');
//2.获取要删除的子元素
var p1 = document.getElementsByClassName('pcon1')[0];
//3.删除子元素
box.removeChild(p1);
// 直接删除某个元素
// 要获取删除的某个元素
var out = document.getElementById('out');
// 直接删除
out.remove();
</script>
6.7克隆节点
方法:currentElement.cloneNode(true/false);
作用:复制 DOM 元素。
该方法只接受一个布尔值的参数,true代表深度拷贝,false代表浅拷贝,不传参的话,默认为false。
<div id="box">
<p class="pcon1">这是第一个P</p>
<p class="pcon2">这是第二个P</p>
</div>
<script>
//1.获取要克隆的元素
var box = document.getElementById('box');
// 默认是false 浅克隆只复制元素本身不包含任何子元素
console.log(box.cloneNode()) //cloneNode()方法接收一个参数,表示是否深度克隆,true表示深度克隆,false表示浅度克隆
document.body.appendChild(box.cloneNode(true))
</script>
七. 根据DOM节点层次关系获取元素
// 访问父节点(亲爸爸)
console.log(div.parentNode);
// 访问下一个兄弟节点
//包括空白节点(幽灵节点)
console.log(div.nextSibling);
//IE9以上才支持
console.log(div.nextElementSibling);
// 访问上一个兄弟节点
//包括空白节点(幽灵节点)
console.log(div.previousSibling);
//IE9以上才支持
console.log(div.previousElementSibling);
// 访问第一个孩子节点
//包括空白节点(幽灵节点)
console.log(div.firstChild);
//IE9以上才支持
console.log(div.firstElementChild);
// 访问最后一个孩子节点
//包括空白节点(幽灵节点)
console.log(div.lastChild);
//IE9以上才支持
console.log(div.lastElementChild);
// 访问孩子节点
//包括空白节点(幽灵节点)
console.log(div.childNodes);
console.log(div.children[1]);
节点的类型名称及值
-
nodeType 属性返回节点类型。
如果节点是一个元素节点,nodeType 属性返回 1。
如果节点是一个文本节点,nodeType 属性返回 3。
如果节点是一个注释节点,nodeType 属性返回 8。
-
nodeName 属性指定节点的节点名称。
如果节点是元素节点,则 nodeName 属性返回标签名。
如果节点是属性节点,则 nodeName 属性返回属性的名称。
对于其他节点类型,nodeName 属性返回不同节点类型的不同名称。
-
nodeValue 属性设置或返回指定节点的节点值。