dom高階操作

2021-10-01 04:06:08 字數 929 閱讀 5042

1.查詢dom元素document.queryselector與document.queryselectorall

document.queryselector('.element')


document.queryselector('#element')


document.queryselector('div')


document.queryselector('[name="username"]')


document.queryselector('div + p > span')
將之前的各種getelementby******整合到了一起，如果只取第乙個元素就使用前者，如果取陣列則用後者

這裡要注意後者取出來的是個類陣列，想將其轉化為陣列，可以使用拓展運算子（...)或是array.form()

上述的操作有點冗長，我們可以仿照jquery來簡寫

const $=document.queryselector.bind(document);


$("#element")
2.新增dom元素

.insertadjacenthtml('beforeend','aaa


')//新增html


.insertadjacenttext('beforeend','aaa')//新增文字


.insertadjacentelement('beforeend',document.createelement('a'))//新增元素
3.替換dom元素

oldelement.replacewith(newelement);//替換


document.queryselector('#oldelement').remove();//移除
4.查詢包含及其他

DOM操作應用高階

tbodies 陣列 thead 乙個元素 tfood 乙個元素 rows，cells 小例子 隔行變色，滑鼠移入變色移出還原 window.onload function 版本1 基礎版本 字串比較 版本1 忽略大小寫 大小寫轉換 版本1 模糊搜尋 search的使用 找到並返回字串出現的位置，沒...

DOM節點及高階操作

1 attributes得到dom屬性節點 包含所有的預設屬性 自定義屬性的屬性名和屬性值 2 getattribute 得到某個屬性值，括號裡為屬性名，可得到所有屬性 預設屬性和自定義屬性 console.log obox.getattribute id console.log obox.geta...

DOM高階知識

需求 使用element.style.left是無法獲取值的，只能給style.left賦值 因此需要用offset獲取該元素在頁面中的位置 1 offsetleft 表示自己的左上角相對於乙個叫做offsetparent的水平偏移量 1 標準流 浮動 非脫標定位 offsetparent是誰？bo...