當前位置：首頁 > 编程语言 > python >内容正文

python

Python学习 Day31 DOM

發布時間：2023/12/14 python 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 Python学习 Day31 DOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

DOM

一、節點樹

概述：節點即為標簽。節點之間的這種關系，我們稱之為“節點樹”
DOM【document object model】文檔對象模型，可以理解為是整個節點樹最外層的“根元素”
DOM其實就是JS語言中內置引用類型document對象，DOM對象經常用來操作節點（標簽）
比如操作節點樣式、屬性

二、DOM屬性

DOM官方給我們提供很多屬性、方法。用來操作節點樹上面的節點
四個屬性：documentElement、head、title、body

//DOM：其實就是內置document對象，引用類型數據console.log(document);//#document 獲取整個網頁所有節點console.log(typeof document);//object </script> <script type="text/javascript">//DOM常用屬性//documentElement屬性：可以獲取到節點樹的HTML標簽console.log(document.documentElement);//head屬性：獲取到節點樹的head標簽console.log(document.head);//title屬性：獲取到節點title標簽的文本console.log(document.title);//body屬性：獲取到節點bodyconsole.log(document.body);

三、DOM方法

概述：DOM對象，官方也給我們提供很多方法用來操作節點樹上的標簽

getElementByID方法：它是DOM對象的方法，可以通過標簽的ID選擇器，在JS中獲取標簽
一般我們將script便簽放在程序最底部
不管節點（標簽）在網頁中嵌套關系如何復雜，都可以通過這個方法獲取到
注意：標簽（節點）在JS當中屬于引用類型數據

<!DOCTYPE html> <html><head><meta charset="UTF-8" id="cur"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}#box{color: red;text-indent: 3em;background-color: cyan;}</style></head><body><div id='box'>我愛你我的祖國</div><ul><li>1</li><li id="me">2</li><li>3</li><li>4</li><li>5</li></ul></body> </html> <script type="text/javascript">//getElementByID方法：可以獲取到節點樹上任意節點【需要給標簽添加id屬性，通過id選擇器獲取】var element = document.getElementById('box');var eleCur = document.getElementById('cur');var eleLi = document.getElementById('me');console.log(element);console.log(cur);console.log(eleLi);console.log(typeof element); </script>

三、操作節點屬性

概述：我們可以通過DOM方法獲取到節點樹上的任意節點（標簽），經常通過點語法來操作節點的屬性、文本、樣式等

屬性、文本：< div id='box' class='cur'>我愛我的祖國< /div> 樣式：<img src='/images/1.jpg'/ >

我們可以通過DOM的方法獲取節點，進而操作節點屬性
通過節點名字利用點語法【屬性名字】，可以獲取節點某一個屬性的屬性值，當然也可以通過JS動態設置對應的新屬性值

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}input{width: 400px;height: 50px;display:block;margin: 100px auto;}#box{color: cyan;background-color: skyblue;width: 300px;height: 300px;border-radius: 50%;text-align: center;line-height: 300px;}</style></head><body><div id="box" class="cur">水面清圓，一一風荷舉</div><div><input type="text" id="box1" /></div></body> </html> <script type="text/javascript">//在JS當中經常通過DOM獲取節點，經常用來操作節點屬性var div = document.getElementById('box');var input = document.getElementById('box1');//獲取節點的屬性值console.log(div.id);console.log(div.className);console.log(input.type);//重新設置節點的屬性值div.id = 'newID';div.className = '哈哈哈';input.type = 'password'; </script>

四、操作節點文本

概述：我們可以通過DOM對象提供方法獲取對應的結點，也可以通過點語法操作節點文本
但是需要注意，操作節點文本分為兩種情況：

（1）操作表單元素文本，需要通過value屬性進行操作
（2）操作非表單元素文本，需要通過innerHTML屬性進行操作【不是input標簽即可 div、span、a、img等】

//非表單元素：不是input標簽即可 div、span、a、img等等//非表單元素操作文本：需要使用innerHTML屬性進行操作var p = document.getElementById('cur');var input = document.getElementById('container');//獲取文本console.log(p.innerHTML);//修改文本p.innerHTML = '晴空一鶴排云上';input.innerHTML = '便引詩情到碧霄';//表單元素操作文本：通過的是value屬性//獲取表單元素文本console.log(input.value);//修改表單元素文本input.value = '通過JS給表單元素重新設置新的文本';

五、操作節點樣式

概述：我們可以通過DOM的方法獲取節點，可以操作節點屬性、文本、行內樣式

樣式：層疊樣式表，樣式可以美化網頁，可以讓元素通過浮動、定位改變它們的位置
樣式分為三種寫法：行內樣式、內部樣式、外部樣式

（1）行內樣式

（2）內部樣式

（3）外部樣式

<link rel="stylesheet" type="text/css" href="css/default.css" />

操作行內樣式

//獲取節點p = document.getElementById('box');//獲取行內樣式console.log(p.style);//所有已設或未設的樣式console.log(p.style.width);//獲取某一行樣式值//設置行內樣式p.style.width = '200px';p.style.height = '200px';p.style.color = 'orangered';p.style.backgroundColor = 'blueviolet';

注意

在JS當中點語法操作的是行內樣式
通過JS代碼：可以獲取行內樣式，當然也可以設置養殖
節點樣式：background-color、font-size【中間帶有橫杠的】，變為駝峰寫法backgroundColor、fontSize

總結

以上是生活随笔為你收集整理的Python学习 Day31 DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Python
DOM

上一篇：安卓实现仿微信点赞好友昵称列表，中间用逗
下一篇： EXCEL技巧——EXCEL如何实现隔行