Dom:
? ? ? ? ? ? ? ? ? Document Object Model 文檔對(duì)象模型?
? ? ? ? ? ? ? ? ? 專門操作網(wǎng)頁內(nèi)容的API
? ? ? ? ? ? ? ? ? 1.Dom可進(jìn)行的操作:
? ? ? ? ? ? ? ? ? ? ? 查找 修改 添加 刪除
? ? ? ? ? ? ? ? ? ? ? 1)查找
? ? ? ? ? ? ? ? ? ? ? ? ? ? A.元素間關(guān)系查找? 案例見demo01
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 父子關(guān)系:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? parentElement; 查找一個(gè)元素的父元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? children;查找一個(gè)元素的所有孩子
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firstElementChild;查找第一個(gè)孩子
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? lastElementChild;查找最后一個(gè)孩子
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兄弟關(guān)系:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? previousElementSibling? 前一個(gè)兄弟元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nextElementSibling? ? ? 下一個(gè)兄弟元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? B.使用HTML元素查找? ? 案例見demo02
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.按id查找:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ele=document.getElementById('id');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn):只能找到一個(gè)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果沒找到返回null
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.按class查找:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ele=document.getElementsByClassName('class');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可以找到多個(gè),返回一個(gè)動(dòng)態(tài)集合
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果沒找到纠俭,返回空集合
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.按標(biāo)簽名查找:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ele=document.getElementByTagName('標(biāo)簽名');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可以找到多個(gè)校坑,返回一個(gè)動(dòng)態(tài)集合
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果沒找到朴恳,返回空集合
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.按name屬性查找
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ele=document.getElementByName('name');
? ? ? ? ? ? ? ? ? ? ? ? ? ? C.使用選擇器查找
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.var ele=document.querySelector('選擇器');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn):只能找到一個(gè),如果找不到,返回null
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.var ele=document.querySelectorAll('選擇器');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn):查找多個(gè)符合選擇器要求的函數(shù)歌豺,如果沒找到耳奕,返回[]集合