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() |
|
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>