前端第六次培训班
DOM部分的学习
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、DOM是什么？
DOM（Document Object Model——文档对象模型），是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
W3C DOM 标准被分为3个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
二、JavaScript HTML DOM
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树:
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
JavaScript - HTML DOM 方法
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
DOM 编程界面
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）
实例：
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
在上述例子中，getElementById 是方法（用id="demo"查找到P元素），而 innerHTML是属性（改变了p元素的内容）。
2.1.1获取元素
根据ID获取元素
使用getElementByld()方法获取带有ID的元素对象
语法：
var element = document.getElementById(id);
参数：
element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null。id是大小写敏感的字符串，代表了所要查找的元素的唯一ID。
返回值：
返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
示例：
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
根据标签名获取元素
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
语法：
var elements = document.getElementsByTagName(name);
参数：
element是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection。name是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。
返回值：
获取过来元素对象的集合，以伪数组的形式储存。
示例：
<p>Hello World!</p>
<p><b>getElementsByTagName</b> 方法</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'第二段中的文本是：' + x[1].innerHTML;
</script>
根据类名获取元素
使用getElementsByClassName方法可以根据类名获取元素对象。
语法：
var elements = document.getElementsByClassName(names);
参数：
element是一个实时集合，包含了找到的所有元素。names是一个字符串，表示要匹配的类名列表；类名通过空格分隔。- getElementsByClassName 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。
返回值：
返回一个包含了所有指定类名的子元素的类数组对象。
示例：
<p class="intro">DOM</p>
<p class="intro"> <b>getElementsByClassName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段：' + x[0].innerHTML;
</script>
法2：使用querySelectorAll 方法可以按查询选择器查找 HTML 元素。（效果同上）
语法：
elementList = parentNode.querySelectorAll(selectors);
参数：
- 选择器需要加符号，例.box #nav
- 如果指定的 选择器 不合法，会抛出错误。如$(“##div”)
返回值：
返回指定选择器的所有元素对象集合。
示例：
<p class="intro">DOM </p>
<p class="intro"> <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段' + x[0].innerHTML;
</script>
通过CSS选择器查找HTML元素
如果需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用querySelectorAll()方法。
本例返回 class=“intro” 的所有 p元素列表：
<!DOCTYPE html>
<html>
<body>
<h1>按查询选择器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>
</body>
</html>
获取body元素
document.body返回的是body对象。
获取html元素
document.documentLiement返回html元素对象
2.1.2 改变HTML元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的内容 |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
2.1.3 添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流(不能在文档加载后使用) |
2.1.4 添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
2.2 HTML DOM 文档
HTML DOM 文档对象是您的网页中所有其他对象的拥有者。
HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
查找 HTML 对象
事件基础
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
事件的三要素
-
事件源 事件被触发的对象
-
事件类型 事件触发机制（鼠标点击onclick/鼠标经过onmouseover/键盘按下onkeydown）
-
事件处理程序 通过一个函数赋值的方式完成
执行事件步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
常见的鼠标事件
| 事件 | 触发条件 |
|---|---|
| onfocus | 获得鼠标焦点 |
| onblur | 失去鼠标焦点 |
| onclick | 点击左键 |
| onmouseover | 鼠标经过 |
| onmouseout | 鼠标移开 |
| onmousedown | 鼠标按下 |
| onmouseup | 鼠标弹起 |
示例：
<h1 onclick="changeText(this)">请点击这里！</h1>
<script>
function changeText(id) {
id.innerHTML = "谢谢！";
}
</script>
操作元素
JavaScript 的DOM操作能改变网页内容、结构、样式。
DOM操作能改变元素中的内容、属性等。
改变元素内容
Element.innerText 属性(不识别html标签，去除空格和换行）
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
div.innerText = '2022-5-20'
}
Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。（效果同上）
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
div.innerHTML = '2022-5-20'
}
常用元素属性操作
src、href、title、alt等
var ldh = document.getElementByld('ldh');
var zxy = document.getElementByld('zxy');
var img = document.querySelector('img');
zxy.onclick = function(){
img.src = 'image/zxy.ipg';
}
ldh.onclick = function(){
img.src = 'image/ldh.ipg';
}
表单元素属性操作
type、value、checked、selected、disabled
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function (){
input.value = '被点击了';
btn.disabled = true;
}
样式属性操作
element.style 行内样式操作
var div = document.querySelector('div');
div.onclick = function (){
this.style.backgroundColor = 'purple';
}
- 样式采用驼峰命名法
- 产生的是行内样式，CSS权重比较高
element.className 类名样式操作
var div = document.querySelector('div');
div.onclick = function (){
this.className = 'change';
}
自定义属性操作
div.getAttribute('index'); //获取自定义属性
div.setAttribute('index',2);//设置自定义属性
div.removeAttribute('index');//移除自定义属性
<div data-index=''></div>//自定义属性命名
节点操作
网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。
一般地，节点至少有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性。
- 元素节点 nodeType为 1（主要）
- 属性节点 nodeType为 2
- 文字节点 nodeType为 3（文本节点包括文字、空格、换行等）
节点层级
1.父级节点（parentNode）
var div = document.querySelector('.div');
console.log(div.parentNode);
- 返回最近一个父节点，如果没有返回null
2.子节点（childNodes）
var ul = document.querySelector('ul');
console.log(ul.childNode);
- 返回值里包含了所有子节点包括元素节点，文本节点，parentNode.children只得到元素节点
- parentNode.firstchild获取第一个子元素（包括文本节点和元素节点）
- parentNode.lastchild获取最后一个子元素（包括文本节点和元素节点）
- parentNode.firstElementchild获取第一个子元素（只有元素节点）
- parentNode.lastElementchild获取最后一个子元素（只有元素节点）
3.兄弟节点
node.nextSibling下一个兄弟关系的节点（包括文本和元素）node.previousSibling上一个兄弟关系的节点（包括文本和元素）node.nextElementSibling下一个兄弟关系的节点（只有元素节点）node.previousElementSibling上一个兄弟关系的节点（只有元素节点）
创建节点
document.createElement(‘tagName’);
添加节点(在后面）
node.appendChild(child);
添加节点(在前面）
node.insertBefore(child,指定元素)；
<div id="div1">
<p id="p1">这是一段文字。</p>
<p id="p2">这是另一段文字。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);
var element = document.getElementById("div1");
//法一
element.appendChild(para);
//法二
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
删除节点
node.removeChild(child)
var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);
复制节点
node.cloneNode()
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(ture);
ul.appendChild(lili);
- 括号参数为空或false，只复制标签，不复制里面的内容
- 括号参数为true，复制标签，复制里面的内容
6537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
