文章

HTML DOM

文章目录

什么是DOM?

HTML DOM
通过 HTML DOM,JavaScript 可访问 HTML 文档的所有元素。

HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树:

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应


document 对象

document 对象
document对象是文档的根节点,window.document属性就指向这个对象。也就是说,只要浏览器开始载入HTML文档,这个对象就开始存在了,可以直接调用。

JavaScript中有一个预定义的 document 对象,可用于访问DOM上的所有元素。

换句话说,文档对象是网页中所有对象的所有者(或根)。

因此,如果要访问HTML页面中的对象,则始终访问 document 对象。
例如:

document.body.innerHTML = "Some text";

由于 body 是 DOM 的元素,因此我们可以使用 document 对象访问它并更改 innerHTML 属性的内容。


选择元素

选择元素
所有HTML元素都是对象。并且我们知道每个对象都有属性和方法。

document 对象具有三种方法最常用于选择HTML元素:

//通过 id 找元素
document.getElementById(id) 

//通过 类 找元素
document.getElementsByClassName(name) 

//通过 标签 找元素
document.getElementsByTagName(name)

在下面的示例中,getElementById 方法用于选择 id="demo" 的元素并更改其内容:

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World";

getElementsByClassName() 方法通过类名查找所有元素,并将其作为数组返回。

例如,如果我们的HTML页面包含三个元素与 class="demo",以下代码将返回所有这些元素作为一个数组:

<div class="demo">
    <span class="demo">Hi I'm Loen!</span>
</div>
<p class="demo">This is a paragraph</p>
<script>
var arr =  document.getElementsByClassName("demo");
//访问第二个元素
arr[1].innerHTML = "Hi I am Peter";
</script>

类似地,getElementsByTagName 方法返回指定标签名称的所有元素,作为数组返回。

以下示例获取页面的所有段落元素并更改其内容:

<p>hi</p>
<p>hello</p>
<p>hi</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
  arr[x].innerHTML = "Hi there";
}
</script>

结果脚本将HTML改变成:

<p>Hi there</p>
<p>Hi there</p>
<p>Hi there</p>

使用DOM

DOM中的每个元素都有一组属性和方法,它们提供有关它们在DOM中的关系的信息:

element.childNodes 返回一个元素的子节点的数组。

element.firstChild 返回元素的第一个子节点。

element.lastChild 返回元素的最后一个子节点。

element.hasChildNodes 如果元素有任何子节点,则返回 true,否则为 false 。

element.nextSibling 返回相同树级别的下一个节点。

element.previousSibling 返回在同一树级别的上一个节点。

element.parentNode 返回元素的父节点。

例如,我们可以选择元素的所有子节点并更改其内容:

<html>
  <body>
    <div id ="demo">
      <p>一些文本</p>
      <p>另一些文本 </p>
    </div>

    <script>
     var a = document.getElementById("demo");
     var arr = a.childNodes;
     for(var x=0;x<arr.length;x++) {
       arr[x].innerHTML = "新的文本";
     }
    </script>

  </body>
</html>

改变属性

改变属性
选择要使用的元素后,您可以更改其属性。

正如我们在以前的课程中看到的,我们可以使用 innerHTML 属性更改元素的文本内容。

同样,我们可以改变元素的属性。

例如,我们可以更改图像的 src 属性:

<img id="myimg" src="https://www.w3cschool.cn/attachments/cover/cover_php.jpg" alt="" />
<script>
var el = document.getElementById("myimg"); // 通过id="myimg"获取元素
el.src = "https://www.w3cschool.cn/attachments/cover/cover_html.png";
</script>

我们可以更改链接的href属性:

<a href="http://www.baidu.com">百度</a>
<script>
var el = document.getElementsByTagName("a");
el[0].href = "https://www.w3cschool.cn";
el[0].innerHTML = "W3Cschool";
</script>

提示: 实际上,可以使用JavaScript更改元素的所有属性。


改变样式

HTML元素的样式也可以使用JavaScript进行更改。

可以使用元素的 style 对象来访问所有样式属性。

例如:

<div id="demo" style="width:200px">一些文本</div>
<script>
  var x = document.getElementById("demo");
  x.style.color = "6600FF";
  x.style.width = "100px";
</script>

上面的代码改变了div元素的文本颜色和宽度。

提示: 所有CSS属性都可以使用JavaScript进行设置和修改。请记住,您不能在属性名称中使用破折号( - ):这些替换为驼峰写法,其中复合词以大写字母开头 比如: background-color属性应该被写为 backgroundColor。


添加和移除元素

添加和移除元素
使用以下方法创建新节点:

element.cloneNode() 克隆元素并返回结果节点。

document.createElement(element) 创建一个新的元素节点。

document.createTextNode(text) 创建一个新的文本节点。

例如:

var node = document.createTextNode("一些新的文本");
这将创建一个新的文本节点,但它将不会出现在文档中,直到您使用以下方法之一将其附加到现有元素:

element.appendChild(newNode) 将一个新的子节点添加到元素作为最后一个子节点。

element.insertBefore(node1, node2) 在节点2之前插入node1作为子节点。

例如:

<div id ="demo">一些文本</div>

<script>
var p = document.createElement('p');
var txt = document.createTextNode('im here');
p.appendChild(txt);
div = document.getElementById('demo');
div.appendChile(p);   //经过我的测试,现在直接写appen也可以//20211022
</script>

移除元素

要删除HTML元素,您必须选择元素的父项并使用 removeChild(node) 方法。 //简直了....

例如:

<div id="demo">
  <p id="p1">这是一个段落.</p>
  <p id="p2">这是另外一个段落.</p>
</div>

<script>
var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

这样会从页面中删除 id ="p1" 的段落。

提示: 实现相同结果的另一种方法是使用 parentNode 属性来获取要删除的元素的父项:

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换元素

要替换HTML元素,使用 element.replaceChild(newNode,oldNode) 方法。

例如:

<div id="demo">
  <p id="p1">这是一个段落</p>
  <p id="p2">这是另一个段落</p>
</div>

<script>
var p = document.createElement("p");
var node = document.createTextNode("这是新的文本");
p.appendChild(node);

var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.replaceChild(p, child);
</script>

提示: 上面的代码创建一个替换现有 p1 段落的新段落元素。

原文来自:HTML DOM,尊重自己,尊重每一个人;转发请注明来源!
0 0

发表评论