1、通過id獲取標(biāo)簽元素
DOM是文檔對(duì)象模型，它提供了一些屬性和方法來方便我們操作document對(duì)象，比如getElementById()方法可以通過某個(gè)標(biāo)簽元素的id來獲取這個(gè)標(biāo)簽元素
// 用法
window.document.getElementById('id');
// 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<h2 id="demo">知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</h2>
<script>
var h2 = document.getElementById('demo');
console.log(typeof(h2));
console.log(h2);
</script>
</script>
</body>
</html>
2、操作標(biāo)簽元素的內(nèi)容
使用DOM可以操作HTML標(biāo)簽元素，寫出各種絢麗多彩的特效，最基本的就是操作標(biāo)簽元素的內(nèi)容。步驟就是先找到要操作的標(biāo)簽元素，接下來對(duì)這個(gè)標(biāo)簽元素進(jìn)行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<h2 id="demo">知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</h2>
<button onclick="update()">點(diǎn)擊修改h2標(biāo)簽元素的顯示內(nèi)容</button>
<script>
function update(){
var h2 = document.getElementById('demo');
h2.innerHTML = '這是修改后的內(nèi)容';
}
</script>
</body>
</html>
3、操作標(biāo)簽元素的屬性
3.1 獲取標(biāo)簽元素的屬性
DOM不僅可以操作標(biāo)簽元素的內(nèi)容還可以操作標(biāo)簽元素的屬性。對(duì)象都是有屬性和方法的，我們獲取標(biāo)簽元素的屬性的值可以使用element對(duì)象的getAttribute()方法，這個(gè)方法接受一個(gè)屬性名，返回對(duì)象的屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<a id="demo" href="https://www.zhishunet.com">知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</a>
<button onclick="getAttr()">點(diǎn)擊獲取a標(biāo)簽的href屬性</button>
<script>
function getAttr(){
var obj_a = document.getElementById('demo');
alert(obj_a.getAttribute('href'));
}
</script>
</body>
</html>
3.2、修改標(biāo)簽元素的屬性
我們可以獲取標(biāo)簽元素的屬性的值，也可以修改元素屬性的值，DOM提供了setAttribute()方法修改標(biāo)簽元素屬性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<a id="demo" href="https://www.zhishunet.com">知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</a>
<button onclick="getAttr()">點(diǎn)擊獲取a標(biāo)簽的href屬性</button>
<script>
function getAttr(){
var obj_a = document.getElementById('demo');
obj_a.setAttribute('href','http://www.zhishunet.cn');
}
</script>
</body>
</html>
其實(shí)不僅可以對(duì)存在的標(biāo)簽屬性的值進(jìn)行修改，對(duì)于不存在的屬性，我們可以添加并設(shè)置它的值文章來源：http://www.zghlxwxcb.cn/news/detail-807681.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<a id="demo">知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</a>
<button onclick="getAttr()">點(diǎn)擊獲取a標(biāo)簽的href屬性</button>
<script>
function getAttr(){
var obj_a = document.getElementById('demo');
obj_a.setAttribute('href','http://www.zhishunet.cn');
}
</script>
</body>
</html>
4、操作標(biāo)簽元素的css樣式
操作標(biāo)簽元素的css樣式我們需要使用標(biāo)簽元素的style屬性文章來源地址http://www.zghlxwxcb.cn/news/detail-807681.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="demo" style="width:200px; height:400px;background-color:red;"></div><br>
<button onclick="update()">點(diǎn)擊修改樣式</button>
<script>
function update(){
var obj_a = document.getElementById('demo');
obj_a.style.backgroundColor = 'black';
}
</script>
</body>
</html>
到了這里，關(guān)于JavaScript DOM可以做什么？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)26（HTML5、CSS3、JavaScript ）JavaScript基礎(chǔ)——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端開發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端開發(fā)技術(shù)12（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機(jī)制——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
