当前位置：网站首页>DOM 知识点总结

DOM 知识点总结

2022-06-29 23:53:00 【秋刀鱼的滋味、】

DOM
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作

文档: 文档就是表示整个html网页文档
对象：对象就是表示将网页中的每一个部分都转换为了一个对象
模型：用模型来表示对象之间的关系，这样方便我们获取对象
常用节点
节点的类型：Document, DocunentType,Element,Text,Comment,DocumentFragment,

常用的节点：
文档节点（document）
整个html文档document对象作为window对象的属性存在的，不获取可以直接使用
元素节点（Element）
文档中的html标签
属性节点（Attribute）
元素的属性表示标签中一个个的属性，属性节点不是元素节点的子节点，是元素节点的一部分
文本节点（Text）
html标签中的文本内容
一个文档所有节点，按照所在的成绩，可以抽象成一种树状，这种树状就是DOM
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNode）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
Document类型
documentElement 始终指向html页面种的<html>元素
body 直接指向<body>元素
title 获取文档的标题
document.URL 取得完整的URL
getElementByld 方法
访问html 元素最常用的方法是使用元素的id
innerHTML 属性
获取元素内容最简单的方法使用 innerHTML属性

方法

属性

document.getElementByid （）

通过元素id来查找元素

document.getElementsByTagName（）

通过标签名来查找元素

document.getElementsByClassName（）

通过类名来查找元素

document.querySelector()

返回文档中匹配指定的CSS选择器的第一元素

document.querySelectorAll()

document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

getElementById（）
返回匹配指定id的一个元素

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()
返回一个htmlcollection（伪数组），包含匹配指定标签名的所有元素

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName() 返回一个HTML集合HTMLCollection(伪数组)，包含匹配指定类名的所有元素。

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');  
  console.log(div);  
</script>

document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

添加元素
创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

document.write() 向文档写如文本或 HTML 表达式

<script>
  document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

attributes：返回一个与该元素相关的所有属性的集合

classList：返回该元素包含的 class 属性的集合

className：获取或设置指定元素的 class 属性的值

clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。

clientTop：返回该元素距离它上边界的高度

clientLeft：返回该元素距离它左边界的宽度

clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。

innerHTML：设置或获取 HTML 语法表示的元素的后代
文本属性及方法

文本长度 length
追加文本 appendData(text)
删除文本 deleteData(beginIndex,count)
插入文本 insertData(beginIndex,text)
替换文本 replaceData(beginIndex,count,text)

<div id="container"></div>
<script>  // 创建文本节点 
var textNode = document.createTextNode('Hello World!');  // 获取container  
var div = document.getElementById('container');  // 将文本节点插入container  div.appendChild(textNode);  // 替换文本  
textNode.replaceData(0,5,'Hi');  // 插入文本  
textNode.insertData(0, 'Hello')
</script>

原网站

版权声明
本文为[秋刀鱼的滋味、]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_67256600/article/details/125527755

当前位置：网站首页>DOM 知识点总结

DOM 知识点总结

边栏推荐

猜你喜欢

随机推荐