springmvc學習指南 之---第39篇 @Configuration註解
阿新 • • 發佈：2021-12-17
DOM是文件物件模型
是一種可以操作HTML文件的重要手段，利用DOM可完成對HTML文件中所有元素的獲取，訪問，標籤屬性和樣式的設定等操作
DOM HTML節點樹
1.根節點：<html>標籤是整個文件的根節點，有且僅有一個。
2.子節點：指的是某個節點的下級節點，
列如<head>和<body>節點是<HTML>節點的子節點
3.父節點：指的是某個節點的上級節點，類如，<HTML>元素則是<head>和<body>節點的父節點。
4.兄弟節點：兩個節點共同屬於一個父節點。
HTML元素操作
利用document物件的方法
| 方法 | 說明 |
| document.getElementById() | 返回對擁有id的第一個物件的引用 |
| document.getElementsByName() |
返回帶有指定名稱的的物件的集合 |
| document.getElementByTagName() | 返回帶有指定標籤名的物件集合 |
| document.getElementByClassName() | 返回帶有指定類名的物件集合（IE6~8） |
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改css樣式</title> <style> #div1{ width: 500px; /*行內權值1000*/ } </style> </head> <body> <div id="div1" class="divC"></div> <div>帥帥</div> </body> </html> <script> //獲取dom 常見有三種樣式// 根據標籤 var divT=document.getElementsByTagName('div') console.log('divT') divT[1].style.color='lightpink' // 根據class // [document.getElementsByClassName('divC')] var divC=document.getElementsByClassName('divC') console.log(divC) divC[0].style.height='300px' // 根據id document.getElementById('div1') console.log( document.getElementById('div1')) // document.getElementById('div1').style.width='300px' var div1=document.getElementById('div1') console.log(div1) div1.style.width='300px' </script>
看主要獲取Dom的三種方式
1.根據標籤
var divT=document.getElementsByTagName('div')
console.log('divT')
divT[1].style.color='lightpink'
首先
TagName為div
我們在div中的文字就會變色
效果如下
然後
2.根據class
var divC=document.getElementsByClassName('divC')
console.log(divC)
divC[0].style.height='300px'
根據class我們就呼叫了divc
效果如下把他的高度設定為了300px
3.根據id
var div1=document.getElementById('div1')
console.log(div1)
div1.style.width='300px'
這樣我們根據id獲取到了div1
設定它的寬度300px
效果如上圖所示