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 文...