前端全套視頻HTML+CSS+JS+jQuery筆記(七)

3.16 document對象學習

在這裏插入圖片描述
使用先於創建;
源碼中是一個標籤,但解析後會封存爲document對象(樹型)中的一個對象;
doucument修改了對象的value,僅僅是它的整個對象修改了,源碼不會變

1. 獲取html元素對象

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
結果:13
每個換行也算一個節點
在這裏插入圖片描述
在這裏插入圖片描述

2. 操作html元素的屬性

在這裏插入圖片描述
使用自定義方式獲取固有屬性的內容,value的值獲取的是默認值,不能獲取到實時的用戶數據。
在這裏插入圖片描述
id和name儘量不要改
在這裏插入圖片描述
在這裏插入圖片描述
添加樣式:
在這裏插入圖片描述

在這裏插入圖片描述
在這裏插入圖片描述

3. 操作html元素的內容

在這裏插入圖片描述
在這裏插入圖片描述

4. 操作元素的文檔結構

在這裏插入圖片描述
table不能使用此方法;

增加上傳文件按鈕以及刪除按鈕
在這裏插入圖片描述
注意雙引號裏是單引號。
在這裏插入圖片描述
結果:
在這裏插入圖片描述
刪除按鈕:
在這裏插入圖片描述
父節點對象刪除子對象:
1.一行構成一個div
2.找到選擇的div——用this
3.用父節點div刪除子div
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
bug:當選擇了數據,再進行按鈕添加時,由於代碼是通過原始值+新的按鈕增加的,所以會覆蓋掉選擇數據文件的操作;使用此方式一般不涉及用戶的操作。
第二種方式:
)
因爲是append,而不是原始值+,所以避免了第一種的bug。
先創建,再存放;

5. js操作form表單

在這裏插入圖片描述
在這裏插入圖片描述
document.form表單name屬性值
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章