JavaScript-4.3-BOM 与 DOM-Core DOM
Core DOM
- 文档对象模型（DOM）是万维网联盟（W3C）的标准
- DOM 定义了访问 HTML和 XML 文档的标准
- W3C DOM 是中立于平台和语言接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式
W3C DOM 标准分为三个不同的部分
1.Core DOM 是核心 DOM，定义了一套标准的针对任何结构化文档的对象，包括 HTML、XHTML 和 XML。核心 DOM 适合操作节点，如创建、删除、查找
2.XML DOM 定义了所有 XML 元素的对象的属性，以及访问它们的方法
3.HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 适合操作属性，如读取或修改属性的值
- 当网页被加载时，浏览器会创建页面的文档对象模型
- Document 对象使用户可以从脚本中对 HTML 页面中的所有元素进行访问
- Document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问
一：DOM 树结构分析
- 通过 getElement 系列方法，可以取到元素节点
DOM 节点分为三大类
1.元素节点：又叫标签节点，指文档中的各种 HTML 标签
2.文档节点：标签中的文字
3.属性节点：标签的属性
二：操作元素节点
- 在 DOM 操作中，操作元素节点是最基础的一步，使用 HTML 操作任何内容都需要选中一个标签，才能对标签以及标签的文字、属性、样式进行修改
1、getElementById
- 在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用此 id 查找想要的元素
<body>
<div id="box">div文字</div>
</body>
<script>
var divById = getElementById("box")
</script>
注意：
通过 id 获取唯一的节点，如果存在多个同名 id，则只会选取第一个
2、getElementsByName / getElementsTagName / getElementsClassName
- 通过 Name、TagName、ClassName 取到一个数组，包含多个节点
- 使用方法，通过循环取到每一个节点，而循环的次数是从0开始，直到数组的最大长度后结束
<body>
<div name="div1" id="div2">div文字</div>
</body>
<script>
var divByName = getElemenstByName("div1")
var divByTagName = getElementsTagName("div")
var divByClassName = getElemetsClassName("div2")
</script>
3、document.querySelector / querySelectorAll
- querySelector() 方法仅仅返回匹配指定 CSS 选中器的第一个元素
- 如果需要返回所有的元素，则使用 querySelectorAll() 方法替代
<body>
<div id="demo">div文字</div>
</body>
<script>
// 获取文档中 id="demo" 的元素
document.querySelector("#demo")
</script>
注意
1.圆括号"()"中传入参数指定一个或多个匹配元素的 CSS 选择器
2.可以使用它们的 id、类、类型、属性、属性值等来选取元素
3.对于多个选择器，使用逗号隔开，返回一个匹配的元素
三：操作文本节点
- 在 DOM 操作中，操作元素节点取到标签节点后，接下俩就可以通过 JavaScript 中提供的方法对标签中的文字进行获取、修改操作
iinnerHTML和innerText的区别
1.innerHTML 指的是从对象的起始位置到终止位置的全部内容，包括 HTML 标签
2.innerText 指的是从起始位置到终止位置的内容，但它去除 HTML 标签
3.innerText 只适用于 IE 浏览器（现在也适应 Chrome 浏览器），而 innerHTML 是符合W3C 标准的属性。尽可能使用 innerHTML,而少用 innerText
1、tagName
- tagName 属性返回元素的标签名，即获取节点标签名
- 在 HTML 中，tagName 属性的返回值始终是大写字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tagName</title>
</head>
<body>
<div id="div"></div>
<button id="btn">点击有惊喜</button>
</body>
<script type="text/javascript">
// 获取元素节点
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){ // 点击按钮弹出对话框
alert(div.tagName);
}
</script>
</html>
效果动态图
2、innerHTML
- innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，即设置或者获取节点内部的所有 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
</head>
<body>
<div id="div"></div>
<button id="btn">点击有惊喜</button>
</body>
<script type="text/javascript">
// 获取元素节点
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){ // 点击按钮弹出对话框
div.innerHTML = "<h1>星期五</h1>"
alert(div.innerHTML);
}
/*
代码执行时，单击按钮后首先执行的是 alter 弹窗
弹窗中显示内容为“<h1>星期五</h1>”，即代码中设置的 innerHTML 中的内容
单击确定按钮后，页面 <div> 中的内容显示为 <h1> 标签中的内容
*/
</script>
</html>
效果动态图
3、innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerText</title>
</head>
<body>
<div id="div">嘻嘻嘻</div>
<button id="btn">点击有惊喜</button>
</body>
<script type="text/javascript">
// 获取元素节点
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){ // 点击按钮弹出对话框
div.innerHTML = "星期五"
alert(div.innerHTML);
}
</script>
</html>
效果动态图
四：操作属性节点
1、查看属性节点
- getAttribute() 方法返回指定属性名的属性值
getAttribute('属性名');
2、设置属性节点
- setAttribute() 方法添加指定的属性，并为其赋指定的值
- 如果这个指定属性已存在，则仅设置或更改属性值
setAttribute("属性名","属性值");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性节点</title>
</head>
<body>
<button id="div1">取到 a 的 href 属性值</button>
<button id="div2">修改 a 的 href 属性值</button>
<a href="http://www.4399.com" id="a1">超链接</a>
</body>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var a1 = document.getElementById('a1');
div1.onclick = function(){
alert(a1.getAttribute('href'));
console.log(a1.href);
}
div2.onclick = function(){
a1.setAttribute("href","http://www.7k7k.com");
console.log(a1.href);
}
</script>
</html>
效果动态图
五：JavaScript 修改元素样式
1、className
- 使用 className 直接设置 class 类，为元素设置一个新的 class 名字
// 基本语法
div.styleName="div1";
2、style
- 使用 style 设置单个属性，为元素设置一个新的样式，注意属性名要使用小驼峰命名法则
// 基本语法
div.style.background-color="red";
3、style.cssText
- style.cssText 为元素同时修改多个样式
- 使用 style 或 style.cssText 可以同时设置多个样式属性
// 基本语法
div.style="background-color:red;color:yellow";
div.style.cssText="background-color:red;color:yellow";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 修改元素样式</title>
<style type="text/css">
.div1{
font-size: 50px;
}
.div2{
font-size:16px;
}
</style>
</head>
<body>
<button id="btn1">通过 className 修改字号</button>
<button id="btn2">通过 style 修改字号</button>
<button id="btn3">通过 style.cssText 修改字号</button>
<div id="div1" class="div1" name="div1">div文字</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var div1 = document.getElementById("div1");
// 通过 className 修改字号
btn1.onclick = function(){
div1.className="div2";
}
// 通过 style 修改字号
btn2.onclick = function(){
div1.style.fontSize = "30px";
}
// 通过 style.cssText 修改字号
btn3.onclick = function(){
div1.style.cssText = "font-size:50px";
}
</script>
</html>
效果动态图
注意
在使用 style 和 style.cssText 修改样式时，需要注意这两种方式都是通过给元素添加行内样式来实现样式修改的，如果要再进行修改也只能使用行内样式修改
六：获取层次节点
- 文档中所有节点相互之间都有关系，包括父子关系、同胞关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取层次节点</title>
</head>
<body>
<div id="box">
第一个 div 标签
<p id="p" title="p标签">第一个 p 标签</p>
<ul>
<li>第一个 li 标签</li>
<li>第二个 li 标签</li>
<li>第三个 li 标签</li>
</ul>
<p>
第二个 p 标签
<span>第一个 span 标签</span>
</p>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
// 1、获取元素的所有子节点
var childs = box.childNodes;
var child = box.children;
console.log(childs);
console.log(child);
// 2、获取元素的第一个子节点
var firsts = box.firstChild;
var first = box.firstElementChild;
console.log(firsts);
console.log(first);
// 3、获取元素的最后一个子节点
var lasts = box.lastChild;
var last = box.lastElementChild;
console.log(lasts);
console.log(last);
// 4、获取当前节点的父节点
var parent = box.parentNode;
console.log(parent);
// 5、获取当前节点的前一个兄弟节点
var previous = box.previousSibling;
var previou = box.previousElementSibling;
console.log(previous);
console.log(previou);
// 6、获取当前节点的后一个兄弟节点
var nexts = box.nextSibling;
var next = box.nextElementSibling;
console.log(nexts);
console.log(next);
// 7、获取当前元素节点的所有属性节点
var p = document.getElementById("p");
var attrs = p.attributes;
console.log(attrs);
</script>
</html>
1、childNodes / children
- childNodes：获取元素的所有子节点，包括按 Enter 键换行等文本节点，结果为数组
- children：获取元素的所有元素节点，不包括 Enter 键换行等文本节点，结果为数组
效果图
2、firstChild / firstElementChild
- firstChild：获取元素的第一个子节点，包括按 Enter 键换行等文本节点；如果存在子元素，则返回第一个元素，否则返回 null
- firstElementChild：获取元素的第一个子节点，不包括 Enter 键换行等文本节点；如果没有元素子节点，则返回 null
效果图
3、lastChild / lastElementChild
- lastChild：获取元素的最后一个子节点，包括 Enter 键换行等文本节点
- lastElementChild：获取元素的最后一个子节点，不包括 Enter 键换行等文本节点
效果图
4、parentNode
- 获取当前节点的父节点
效果图
5、previousSibling / previousElementSibling
- previousSibling：获取当前节点的前一个兄弟节点，包括 Enter 键换行等文本节点
- previousElementSibling：获取当前节点的前一个兄弟节点，不包括 Enter 键换行等文本节点
效果图
6、nextSibling / nextElementSibling
- nextSibling：获取当前节点后一个兄弟节点，包括 Enter 键换行等文本节点
- nextElementSibling：获取当前节点后一个兄弟节点，不包括 Enter 键换行等文本节点
效果图
7、attributes
- attributes：获取当前元素节点的所有属性节点
效果图
七：创建新节点
- 在进行 DOM 操作时，创建新结点（元素）是必不可少的步骤，因为操作 DOM 的基础就是先获得标签节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建新节点</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#div1{
height:50px;
background-color:#0ff;
}
</style>
</head>
<body>
<ul id="ul1">
<li>第一项</li>
<li>第二项</li>
</ul>
<div id="div1"></div>
<button id="btn1">在文档最后插入一张图片</button>
<button id="btn2">在 ul 和 div 之间插入一张图片</button>
<button id="btn3">复制一个 ul</button>
</body>
<script type="text/javascript">
var img = document.createElement("img"); // 创建一个图片节点
var btn1 = document.getElementById("btn1"); // 获取 btn1 节点
var btn2 = document.getElementById("btn2"); // 获取 btn2 节点
var div1 = document.getElementById("div1"); // 获取 div1 节点
var btn3 = document.getElementById("btn3"); // 获取 btn3 节点
var ul1 = document.getElementById("ul1"); // 获取 ul1 节点
btn1.onclick = function(){
img.setAttribute("src","1.jpg"); // 给 img 节点设置属性
document.body.appendChild(img); // 在文档最后插入一张图片
}
btn2.onclick = function(){
img.setAttribute("src","2.jpg"); // 给 img 节点设置属性
document.body.insertBefore(img,div1); // 在 ul 和 div 之间插入一张
}
btn3.onclick = function(){
var ulClone = ul1.cloneNode(true); // 复制 ul 的所有子节点
document.body.insertBefore(ulClone,div1); // 在 div1 之前复制 ul
}
</script>
</html>
效果动态图
1、createElement(“标签名”)
- 创建一个新的节点，需要配合 setAttribute()方法给新节点设置相关属性
var img = document,createElement("img"); // 创建一个 img 节点
img.setAttribute("src","1.jpg"); // 给 img 节点设置属性值
2、appendChild(“节点名”)
- appendChild() 方法可向节点的子节点列表的末尾添加新的子节点，即在某元素的最后追加一个新节点
document.body.appendChild(img); // 将设置好的 img 节点追加到 body 最后
3、insertBefore(新节点名，目标节点名)
- 将新节点插入到目标节点之前
document.body.insertfore(img,div1); // 将设置好的 img 节点插到 div1 之前
4、cloneNode(true/false)
- cloneNode 的作用是复制节点，需要复制哪个节点，就用哪个节点去调用被复制对象
- 传递参数为
- true：表示复制当前节点及所有子节点
- false：表示只复制当前节点，不复制子节点（默认）
八：删除/替换节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除/替换节点</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#div1{
height:50px;
background-color:#0ff;
}
</style>
</head>
<body>
<ul id="ul1">
<li>第一项</li>
<li>第二项</li>
</ul>
<div id="div1"></div>
<button id="btn1">删除 ul</button>
<button id="btn2">新建 div 替换 ul</button>
</body>
<script type="text/javascript">
btn1.onclick = function(){
var btn1 = document.getElementById("btn1"); // 获取 btn1 节点
var ul1 = document.getElementById("ul1"); // 获取 ul1 节点
if(ul1){
document.body.removeChild(ul1); // 删除 ul 节点
}else{
alert("ul 已经被删除");
}
}
btn2.onclick = function(){
var btn2 = document.getElementById("btn2"); // 获取 btn2 节点
var div2 = document.createElement("div"); // 创建一个 div 节点
var ul1 = document.getElementById("ul1"); // 获取 ul1 节点
div2.setAttribute("style","width:100%;height:30px;background-color:#ff0;");
if(ul1){
document.body.replaceChild(div2,ul1); // 使用 div2 替换掉 ul1
}else{
alert("ul 已经被删除");
}
}
</script>
</html>
效果动态图
1、removeChild(需删除节点)
- removeChild() 方法指定元素的某个指定的子节点，并从父容器中删除指定节点
- 以 Node 对象返回被删除的节点，如果节点不存在则返回 null
document.body.removeChild(ul); // 从ul的父容器 body 中删除 ul 节点
2、replaceChild(新节点，被替换节点)
- 用新节点替换指定节点
document.body.replaceChild(newDiv,oldDiv); // 使用 newDiv 替换掉 oldDiv
扫一扫
1740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
