投稿

HTML文档DOM相关知识

p2p信息资源网 • • 财经信息

1. DOM简介

前端JavaScript，经常提到的一个词就是DOM，DOM操作，初听是一团雾水，有的干了好几年前端，也不知道DOM是个啥。DOM是单词document object model的首字母，按照三个单词的翻译就是：文档对象模型。是一种标准，符合这个标准，就可以称为文档对象模型。如果文档是XML，就可以叫XML DOM；如果文档是HTML，就可以叫HTML DOM。DOM是标准，方法论，抽象的，HTML DOM是具体实现。

2. HTML DOM

DOM，根据英文单词翻译是文档对象模型，HTML固然就是叫HTML文档。HTML DOM定义了对HTML文档里元素的操作(增删改查)。

2.1 节点

根据DOM，HTML文档中的每个成分都是一个节点。整个HTML文档是一个文档节点，每个HTML标签是一个元素节点，每个HTML标签上的属性是一个属性节点，每个HTML标签中的文本是文本节点。

HTML文档DOM相关知识

2.2 获取元素节点

一个HTML文档中，如果找到想要找的元素节点后，其元素的属性节点、文本节点也能找到了。下面介绍几种找到元素节点的方法。

getElementById()

通过元素id来找到其对应的元素。一个HTML文档，id是唯一的，如果出现两个一样的id会报错。用此种方法找到的是该HTML文档中唯一的元素。

语法：

document.getElementById("id名")

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oH1 = document.getElementById("title")
console.log(oH1)
}
</script>
</head>
<body>
<h1 id="title">前程似紧</h1>
</body>
</html>

HTML文档DOM相关知识

解析：

通过F12控制台打印，JavaScript确实通过元素的id属性名找到了其元素。定位到了该元素，就可以给该元素增删改查元素或增删改查属性节点、文本节点。这是后话，这里先不展开说。

getElementsByTagName()

通过元素名（标签名、标记，说的都是一回事）找到元素。就像通过姓名找马冬梅，可能存在重名，不能确定唯一性。

HTML文档DOM相关知识

语法：

document.getElementsByTagName('标签名')

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.getElementsByTagName('p')
console.log(oP)
}
</script>
</head>
<body>
<p>手头紧</p>
<p>眉头紧</p>
</body>
</html>

HTML文档DOM相关知识

HTML文档DOM相关知识

解析：

getElementsByTagName()方法获取的是一个集合，即使整个HTML文档只获取到符合条件的元素。

getElementsByClassName()

通过类名找到元素。一个HTML文档，相同类名可以存在不同元素上，通过类名找到的是一个集合。

语法：

document.getElementsByClassName('类名')

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oTmp = document.getElementsByClassName('tmp')
console.log(oTmp)
}
</script>
</head>
<body>
<div class="tmp">手头紧</div>
<p class="tmp">眉头紧</p>
</body>
</html>

HTML文档DOM相关知识

HTML文档DOM相关知识

解析：

getElementsByClassName()方法同通过标签名获取元素一样，结果是一个集合，即使整个HTML文档只获取到符合条件的元素。

querySelector()

通过类似CSS选择器方式获取第一个满足条件的元素。

语法：

document.querySelector('选择器')

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oTmp = document.querySelector('div.tmp')
console.log(oTmp)
}
</script>
</head>
<body>
<div class="tmp">手头紧</div>
<p class="tmp">眉头紧</p>
</body>
</html>

HTML文档DOM相关知识

document.querySelectorAll()

通过类似CSS选择器方式获取所有满足条件的元素，结果集可以理解为一个数组。

语法：

document.querySelectorAll('选择器')

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oTmp = document.querySelectorAll('.tmp')
console.log(oTmp)
}
</script>
</head>
<body>
<div class="tmp">手头紧</div>
<p class="tmp">眉头紧</p>
</body>
</html>

HTML文档DOM相关知识

解析：

document.querySelectorAll()方法获取的是一个结果集。

getElementsByName()

form表单中，可以通过元素name属性值方式获取该，存在单选框、多选框的情况，结果也是一个集合。

语法：

document.getElementsByName('属性值')

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oRadio = document.getElementsByName('radio')
console.log(oRadio)
}
</script>
</head>
<body>
<input type="text" name="radio" value="男">
<input type="text" name="radio" value="女">
</body>
</html>

HTML文档DOM相关知识

document.title

HTML文档DOM相关知识

一个HTML文档只有一个title元素，所以不用
document.getElementsByTagName、document.querySelector等方式获取元素，直接操作即可

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
document.title = 'China'
}
</script>
</head>
<body>
</body>
</html>

HTML文档DOM相关知识

document.body

一个HTML文档只有一个body元素，所以不用
document.getElementsByTagName、document.querySelector等方式获取元素，直接操作即可

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
document.body.style.backgroundColor = 'gray'
}
</script>
</head>
<body>
</body>
</html>

HTML文档DOM相关知识

2.3 创建元素节点

HTML文档DOM相关知识

通过上节获取元素节点知识，我们可以获取HTML文档中任一元素。如上图，我们想往id=content的div元素添加子元素。首先我们得创建一个元素，其次插入进去。元素节点中还得有属性节点、文本节点。

创建元素节点

语法：

document.createElement('标签名')

示例：

var oP = document.createElement('p');

创建文本节点

语法：

document.createTextNode('文本内容')

示例：

var oTxt = document.createTextNode('前程似紧');

文本节点插入元素节点中

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
// 创建元素节点
var oP = document.createElement('p');
// 创建文本节点
var oTxt = document.createTextNode('前程似紧');
// 文本节点插入元素节点中
oP.appendChild(oTxt)
console.log(oP)
}
</script>
</head>
<body>
</body>
</html>

HTML文档DOM相关知识

添加属性节点

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
// 创建元素节点
var oP = document.createElement('p');
// 创建文本节点
var oTxt = document.createTextNode('前程似紧');
// 文本节点插入元素节点中
oP.appendChild(oTxt)
// 添加类属性
oP.className = 'test'
// 添加样式属性
oP.style.color = 'red'
console.log(oP)
}
</script>
</head>
<body>
</body>
</html>

HTML文档DOM相关知识

解析：

在JavaScript中class是关键字，所以在这里className来替代class。

2.4 插入元素节点

获取元素节点已经可以定位HTML文档中某个具体位置了，创建元素节点已经可以创建某个具体元素了（包含文本节点、属性节点）。创建元素节点得插入到获取到的元素节点位置上。

appendChild()

子节点尾部添加元素。

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
// 创建元素节点
var oP = document.createElement('p');
// 创建文本节点
var oTxt = document.createTextNode('前程似紧');
// 文本节点插入元素节点中
oP.appendChild(oTxt)
// 获取元素节点
var oDiv = document.getElementById('content');
oDiv.appendChild(oP)
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

insertBefore()

指定子节点头部添加元素

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
// 创建元素节点
var oP = document.createElement('p');
// 创建文本节点
var oTxt = document.createTextNode('前程似紧');
// 文本节点插入元素节点中
oP.appendChild(oTxt)
// 获取元素节点
var oDiv = document.getElementById('content');
oDiv.insertBefore(oP, oDiv.firstElementChild)
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

2.5 复制元素节点

可以从零创建一个元素节点，也可以从现有的元素节点复制一个元素节点，这可以理解是另外一种创建元素节点的方式。

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
var oClone = oP.cloneNode(true)
// 获取元素节点
var oDiv = document.getElementById('content');
oDiv.appendChild(oClone)
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

2.6 删除元素节点

元素节点能增，肯定也可以删

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oMe = document.querySelector('.me');
// 获取元素节点
var oDiv = document.getElementById('content');
oDiv.removeChild(oMe)
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
<p class="me">me,it's me</p>
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

解析：

能定位到元素节点，就肯定有方法可以删掉它。

2.7 替换元素节点

增删改查操作，就像卧龙凤雏一般都是一起出现的。这里替换元素节点的方法相当于改操作。

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oMe = document.querySelector('.me');
var oP = document.createElement('p');
var oTxt = document.createTextNode('我，是我');
oP.appendChild(oTxt)
// 获取元素节点
var oDiv = document.getElementById('content');
oDiv.replaceChild(oP, oMe)
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
<p class="me">me,it's me</p>
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

3. 创建元素节点

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
// 创建元素节点
var oP = document.createElement('p');
// 创建文本节点
var oTxt = document.createTextNode('前程似紧');
// 文本节点插入元素节点中
oP.appendChild(oTxt)
console.log(oP)
}
</script>
</head>
<body>
</body>
</html>

分析：

示例方式创建元素节点比较麻烦，元素比较多，操作起来比较难受。

3.1 innerHTML

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oDiv = document.getElementById('content');
oDiv.innerHTML = "<p>me,it's me</p>"
}
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>

HTML文档DOM相关知识

分析：

用innerHTML方式完成一个完整的的元素节点（可以包含属于节点、内容节点）设置。同时也可以用obj.innerHTML方式获取对象完整元素节点。

3.2 innerText

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oDiv = document.getElementById('content');
oDiv.innerText = 'hello world'
}
</script>
</head>
<body>
<div id="content">

</div>
</body>
</html>

HTML文档DOM相关知识

分析：

用obj.innerText方式设置的是内容节点，即使加了标签也会被当成文本内容，浏览器不解析。同时也可以用obj.innerText方式获取内容节点。

4. 属性节点操作

属性分为HTML属性和CSS属性。HTML属性是HTML中元素带有的属性，比如name、src、value等；CSS属性是层叠样式的属性，比如style、background等

4.1 HTML属性

获取HTML属性值

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oMe = document.querySelector('.me');
console.log("class = " + oMe.className)
}
</script>
</head>
<body>
<div id="content">
<p class="me">me,it's me</p>
</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oMe = document.querySelector('.me');
console.log("class = " + oMe.getAttribute('class'))
}
</script>
</head>
<body>
<div id="content">
<p class="me">me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

解析：

获取HTML属性值可以通过obj.属性名或者obj.getAttribute('属性名')的方式获取

设置HTML属性值

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
oP.className = 'me'
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
oP.setAttribute('class', 'me')
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

分析：

设置HTML属性值可以通过obj.属性名=属性值或者obj.setAttribute('属性名','属性值')的方式设置

移除HTML属性

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
oP.removeAttribute('class')
}
</script>
</head>
<body>
<div id="content">
<p class="me">me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

解析：

HTML属性的移除通过obj.removeAttribute('属性名')

判断含有HTML某属性

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
if (oP.hasAttribute('class')) {
console.log('yes')
} else {
console.log('no')
}
}
</script>
</head>
<body>
<div id="content">
<p class="me">me,it's me</p>
</div>
</body>
</html>

4.2 CSS属性

获取CSS属性

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
// console.log(getComputedStyle(oP)['color'])
console.log(getComputedStyle(oP).color)
}
</script>
</head>
<body>
<div id="content">
<p style="color: red">me,it's me</p>
</div>
</body>
</html>

分析：

getComputedStyle(obj)['属性名']或者getComputedStyle(obj).属性名的方式获取CSS属性值

设置CSS属性

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
oP.style.color = 'red'
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
oP.style.cssText = 'color:red'
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

分析：

CSS属性值的设置可以通过obj.style.属性名=属性值或obj.style.cssText='属性名:属性值;...'，后者可以同时设置多个CSS属性

5. 查找元素节点

定位到某个元素节点，这个时候业务有需要找其父节点、兄弟节点、子节点

5.1 父节点

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
var oParent = oP.parentNode
console.log(oParent)
}
</script>
</head>
<body>
<div id="content">
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

分析：

obj.parentNode获取父节点

5.2 兄弟节点

previousSibling（查找前一个兄弟节点）、nextSibling（查找后一个兄弟节点）、previousElementSibling（查找前一个兄弟元素节点）、nextElementSibling（查找后一个兄弟元素节点）。

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oP = document.querySelector('p');
var oPn = oP.nextElementSibling
console.log(oPn)
}
</script>
</head>
<body>
<div id="content">
<p>我，是我</p>
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

分析：

一般是查找其兄弟元素节点，只要找到其兄弟元素了，其属性、其文本都好办了。

5.3 子节点

childNodes（所有子节点）、firstChild（第一个子节点）、lastChild（最后一个子节点）、children（所有元素节点）、firstElementChild（第一个子元素节点）、lastElementChild（最后一个子元素节点）

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var oDiv = document.querySelector('#content');
var oChidren = oDiv.children
console.log(oChidren)
}
</script>
</head>
<body>
<div id="content">
<p>我，是我</p>
<p>me,it's me</p>
</div>
</body>
</html>

HTML文档DOM相关知识

分析：

一般是查找子元素节点，只要找到其子元素了，其属性、其文本都好办了。

本文来自投稿，作者：p2p信息资源网，不代表p2p信息资源网立场！如有侵权，联系管理员：202348182@qq.com删除

赞 (0)
p2p信息资源网p2p信息资源网
0 0
上一篇 2023年8月23日 am1:10
下一篇 2023年8月23日 am1:20

相关推荐