瀏覽器DOM操作

2022-08-22 11:48:09 字數 3105 閱讀 4278

repaint and reflow

dom事件

- innerhtml:內部html,content

;- outerhtml:外部html,content

;- innertext:不會返回隱藏元素的文字,受 css 樣式的影響,它會觸發重排(reflow);ie11及以下,不僅會移除當前元素的子節點,而且還會永久性地破壞所有後代文字節點

- textcontent,會獲取所有元素的內容,包括 css內容;對比innertext,不會引起重排;相容性: ie9開始支援

- outertext:outertext 賦值時會把整個標籤一起賦值掉;非標準屬性,不要在生產環境中使用!

node是乙個介面,許多dom型別從這個介面繼承,常用如元素節點,文字節點,屬性節點.

每個node物件均有nodevalue,nodetype屬性:

常用nodetype

可以用在遍歷dom樹時使用節點型別過濾

var allchildren = document.getelementbyid('inhere');

for(var i = 0; i < allchildren.length; i++)

}

nodelist是乙個節點的集合,具有以下特徵:

htmlcollection

獲取節點

- document.getelementbyid() 根據id返回乙個 element 物件,沒有返回 null

- document.getelementsbyclassname

- document.getelementsbytagname(name) 返回乙個 htmlcollection;在 webkit 核心的瀏覽器中返回乙個 nodelist

- document.getelementsbyname(name) name:是元素的 name 屬性的值;返回乙個 nodelist 集合

- document.queryselector

- 使用深度優先先序遍歷文件的節點

- 如果沒有找到匹配元素,則返回 null

- 返回第乙個匹配的節點

- document.querysellectorall 返回乙個 nodelist,並且是靜態集合

var allpara = document.getelementsbytagname('p');

for(var i = 0; i < allpara.length; i++)

→var allpara = document.getelementsbytagname('p');

var collecttemp = ;

for(var i = 0; i < allpara.length; i++)

for(i = 0; i < collecttemp.length; i++)

collecttemp = null;

var docfragm = document.createdocumentfragment();

var elem, contents;

for(var i = 0; i < textlist.length; i++)

var original = document.getelementbyid('container');

var cloned = original.clonenode(true);

cloned.setattribute('width', '50%');

var elem, contents;

for(var i = 0; i < textlist.length; i++)

original.parentnode.replacechild(cloned, original);

var poselem = document.getelementbyid('animation');

poselem.style.display = 'none';

poselem.style.width = '10em';

// other changes…

poselem.style.display = 'block';// block 塊級元素

div 

div.highlight

…document.getelementbyid('mainelement').classname = 'highlight';

var poselem = document.getelementbyid('animation');

var newstyle = 'background: ' + newback + ';' +

'color: ' + newcolor + ';' +

'border: ' + newborder + ';';

if(typeof(poselem.style.csstext) != 'undefined') else

event 物件

// 取消冒泡和預設行為

function cancelhandler(event)else

return false;

// jquery

return false;

} /*只取消冒泡*/

function stophandler(event)

window.event?window.event.cancelbubble=true:event.stoppropagation();

// jquery

event.stoppropagation();

}/*只取消預設行為*/

function cancledefault(event)

DOM 重點核心 瀏覽器渲染

獲取節點document.getelementbyid idname document.getelementsbyname name document.getelementsbyclassname classname 注意 getelementsbyclassname 在 internet expl...

delphi 瀏覽器操作

獲取預設internet瀏覽器 設定自己的internet瀏覽器 以下是針對windwos 7 以上的系統作出的方案 註冊自己的瀏覽器 function regeditweb cmdline,path string boolean var reg tregistry begin result fal...

selenium瀏覽器操作

在元素定位中xpath使用的還算比較多,介紹一下常見的firfox和chrome瀏覽器外掛程式安裝 一 瀏覽器定位工具安裝 1 firfox firfox比較簡單,主要瀏覽器自帶的定位功能也比較強大國內也比較好的支援外掛程式安裝 1 安裝 我這裡已經安裝好了所以可以在 我的附加元件 裡面檢視,如果沒...