DOM詳解 三 DOM修改

2021-09-25 02:00:06 字數 1870 閱讀 5069

1. .innerhtml: 獲取或設定元素開始標籤到結束標籤之間的html**片段。

2. .textcontent: 獲取或設定元素開始標籤到結束標籤之間的純文字內容。

2件事: 1. 去掉了html標籤

2. 將轉義字元轉換為正文

何時: 如果希望去掉內容中的標籤,僅獲取文字內容時

.textcontent有相容性問題: ie8不相容

ie8: .innertext

html標準屬性: 

核心dom: 萬能

1. 獲取屬性:

①. 獲得屬性節點物件: (了解)

var attrnode=elem.attributes[i/屬性名];

elem.getattributenode("屬性名");

attrnode.value

② 直接獲得屬性值: 

var value=elem.getattribute("屬性名");

2. 設定屬性:

elem.setattribute("屬性名",新值);

3. 判斷是否包含指定屬性:

var bool=elem.hasattribute("屬性名")

4. 移除屬性:

elem.removeattribute("屬性名");

html dom: 僅對部分的簡化

elem.屬性名

強調: html中的class屬性和es中的class屬性衝突

html中的class要改名為classname

特例: disabled    selected   checked

不能用核心dom操作!只能用html dom打點操作

attribute  vs  property

attribute只出現在開始標籤中的屬性

property儲存在記憶體中的物件中的屬性

核心dom只能操作出現在頁面上的attribute屬性

無法操作未出現在頁面上的記憶體中的property屬性

html dom可訪問記憶體中的property屬性

自定義屬性:  2種: 

1. 只能用核心dom訪問,不能用html訪問

2. html5: ——相容問題

所有自定義屬性: 屬性名必須: data-屬性名

訪問時: elem.dataset.屬性名

何時: 1. 在客戶端網頁中臨時快取部分業務資料

2. 代替id和class作為查詢元素的條件

內聯: elem.style.css屬性名

強調: 所有css屬性都要去橫線變駝峰

background-color -> backgroundcolor

list-style-type -> liststyletype

問題1: 只能獲得/設定內聯樣式

無法獲取最終應用到元素上的完整樣式

解決: 

如果設定乙個元素的樣式: elem.style.css屬性名

因為: 優先順序最高!不影響其他元素

如果獲取乙個元素的樣式: 不用style

getcomputedstyle(elem).css屬性名

問題2: elem.style.css屬性名一句話只能設定乙個樣式

如果需要同時設定乙個元素的多個css屬性,**繁瑣

解決: 今後只要操作乙個元素的樣式,都用class屬性批量操作

特例: 精確控制動畫效果時,需要操作單個css屬性

內部/外部樣式表: 

補: .innerhtml只能獲得封閉標籤的內容

表單元素的值只能用.value

DOM詳解 二 DOM查詢

1.三個元素不用找,可直接獲得 document.documentelement document.head document.body 2.節點間關係 2大類 不常用 何時 只要已經獲得了乙個節點,找周圍節點時 節點樹 包含所有節點 元素,文字 的完整的樹結構 1.父子關係 elem.parent...

前端基礎(十九 DOM 獲取 修改DOM)

dom是文件物件模型的縮寫。通過dom,js能訪問和改變html中的所有元素,dom模型被結構化為物件樹 通過這個物件模型,我們可以在js中對html元素和屬性進行增加 修改和刪除,對css樣式進行修改,還可以增加html事件,並作出反應等。獲取dom元素常用的方法如下 document.getel...

DOM基礎詳解

認識dom 是什麼 文件物件模型 為什麼 w3c推出,為了相容瀏覽器,替代dhtml 文件型別 gml 通用標記語言 sgml 標準通用標記語言 html 超文字標記語言,用於顯示資料 xml 可擴充套件標記語言,用於描述資料 節點 節點型別 基礎 元素節點1 屬性節點2 文字節點3 注釋節點8 文...