前端第六次培训班
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,复制标签,复制里面的内容