當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DOM初级篇

發布時間：2025/3/15 编程问答 13 豆豆

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

DOM是什么、作用、與javascript？

DOM是對HTML文檔的訪問和操作，對文檔的增刪改查。

DOM相當于是javascript一個類，這個類中提供了多種操作HTML的方法，也可以說DOM是依附在JavaScript上進行操作的。

一、標簽的查找命令；

　　1.Node 與 Element的區別： node中有text文檔 ?Element 只有標簽元素。

　　2.間接查找是建立在有一個標簽的基礎上對他的父級，子級，兄弟級標簽的查找。

　　直接查找：

　　　　document.getElementById() ? ? ? ? ? ? 返回帶有指定 ID 的元素

　　　　document.getElementsByName() ? ? ?根據name的值獲取標簽集合

　　　　document.getElementsByClassname ?根據類名獲取標簽集合

　　　　document.getElementByTagName ? ? ?根據標簽名獲取標簽集合

　　間接查找：

　　　　parentNode ? ? 　　　　父節點

　　　　childNodes ? ? ? 　　 ? ? 所有子節點

　　　　firstChild ? ? ? ? 　　　　第一個子節點

　　　　lastChild　　　　　　　最后一個子節點　　　

　　　　nextSibling　　　　　　下一個兄弟節點

　　　　previousSibling ? ?　　 ?上一個兄弟節點

　　　　parentElement ? ? ? 　　父親標簽

　　　　children　　　　　 ? ?　 ?所有孩子標簽

　　　　firstElementChild ? ? ?　 ?第一個孩子標簽

　　　　lastElementChild ? ? ? 　 ?最后一個孩子標簽

　　　　nextElementSibling ? ?　 ?下一個兄弟標簽

　　　　previousElementSibling ? 上一個兄弟標簽

二、對Html文檔的操作

1、標簽內容進行增刪改；

　　innerText ? ? ? ? 獲取和設置指定標簽下所以的文本內容 ? ?如：（I love you ?You Know?）

　　outerText ??　　獲取和設置指定標簽本身所以的文本內容

　　innerHTML ? ? ? 獲取和設置指定標簽下所有文本+HTML ? ? 如：（ I love you<hr>You Know?）? ? 　

　　outerHTML　　 ?獲取和設置對象的標簽本身所有文本+HTML

　　value ? ? ? ? ? ? ? 獲取和設置value

2、對標簽屬性進行增刪改

　　attributes ? ? ? ? ? 獲取標簽的所以屬性 ?

　　attributes[name].value ? ? ?獲取和設置name的值

　　setAttribute(key,value) ? ? ?指定一個存在的key ? 設置值。

　　getAttribute(key) ? ? ?獲取指定key的值

　　createAttribute：僅建立一個屬性 ?（不會使用）

　　removeAttribute：刪除一個屬性

3、對標簽中的class 進行操作

　　className(cls) ? ? ? ?獲取和設置類名

　　classList.remove(cls) ? 刪除一個指定值

　　classList.add(cls) ? ? ? ?增加一個指定的值

4、插入新標簽

　　1.創建??

　　　　方式一

　　　　　　var?tag = document.createElement('a')

　　　　　　tag.innerText =?"wupeiqi"

　　　　　　tag.className =?"c1"

　　　　　 ?tag.href =?"http://www.cnblogs.com/wupeiqi"

　　　　方式二　　

　　　　　 ?var?tag ="<a class='c1'href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

　　2.添加到Html中

　　　　　obj.appendChild(tag)

5、樣式操作

　　var obj = document.getElementById("i1")

　　obj.style.fontSize = "32px"

　　obj.style.backgroundColor = "red"

6、位置（實例返回頂部）

主要思路： ?獲取滑輪的位置值（document.body.scrollTop）--> 設置滑輪的值為0，代表返回頂部。--> 加個判斷條件 ?隱藏或顯示 Top圖標；

注意：οnscrοll=func() ? 只能放在 ?body標簽內，代表滑輪一滾動就執行一次該函數；

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.c1{height: 2000px;background-color: #dddddd;}.c2{width: 40px;height: 40px;background-color: gray;color: white;position: fixed;right: 10px;bottom: 10px;text-align: center;line-height: 40px;cursor: pointer;}.hide{display: none;}</style> </head> <body onscroll="Tops()"> //必須寫在body上面<div class="c1">看到你了</div><div id="c2" class="c2 hide" onclick="Top()">TOP</div><script>function Tops() {var Tops = document.body.scrollTop; //獲取滑輪的位置值if(Tops > 50){document.getElementById("c2").classList.remove("hide")}else{document.getElementById("c2").classList.add("hide")}}function Top() {document.body.scrollTop = 0 //獲取并設置滑輪的位置的值 }</script> </body> </html> 返回頂部實例

7.事件

　　事件就是當用戶點擊或者滾動頁面時，就會執行某個函數。

　　注意參數this的使用　　

?三、其他

　　1.定時器

　　　　setInterval???????????????? 多次定時器

轉載于:https://www.cnblogs.com/learn-python-M/p/6941439.html

總結

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

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