JavaScript高级程序设计 DOM学习笔记_javascript技巧
第十章 DOM
DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性、方法,具体实现由各自浏览器实现。
1. 节点层次
1) 文档节点:document,每个文档的根节点。
2) 文档元素:即元素,文档最外层元素,文档节点第一个子节点。
3) Node类型:
①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法。
□ Node.Element_NODE(1);
□ Node.ATTRIBUTE_NODE(2);
□ Node.TEXT_NODE(3);
□ Node.CDATA_SECTION_NODE(4);
□ Node.ENTITY_REFERENCE_NODE(5);
□ Node.ENTITY_NODE(6);
□ Node.PROCESSING_INSTRUCTION_NODE(7);
□ Node.COMMENT_NODE(8);
□ Node.DOCUMENT_NODE(9);
□ Node.DOCUMENT_TYPE_NODE(10);
□ Node.DOCUMENT_FRAGMENT_NODE(11);
□ Node.NOTATION_NODE(12);
每种节点的nodeType属性返回上述类型之一,为一常量。
通过节点nodeType属性与数字值比较,可得节点类型。
②nodeName和nodeVlue属性。
③每个节点的子节点信息保存在childNodes属性中,childNodes属性中保存一个NodeList对象。
□ NodeList对象,类数组对象,有length属性,但非Array的实例。
□ 访问NodeList中的节点,可以通过方括号,也可以使用item()方法。
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ 将NodeList转为数组对象。
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //非IE
}catch(ex){
array = new Array();
for(var i = 0,len = nodes.length; i array.push(nodes[i]);
}
}
return array;
}
④parentName属性:指向文档树中父节点。
⑤previousSibling属性和nextSibling属性:前一个/下一个同胞节点。
⑥firstChild属性和lastChild属性:前一个/后一个子节点。
⑦hasChildNodes()方法:含子节点返回true,反之返回false。
⑧appendChild()方法:向childNodes列表末尾添加一个子节点,返回新增节点。
⑨insertBefore()方法:两个参数:要插入的节点和作为参照的节点。返回新增节点。
⑩replaceChild()方法:两个参数:要插入的节点和要替换节点。返回新增节点。
⑾removeChild()方法:移除节点。
⑿cloneNode()方法:接受一个布尔值。true为深复制,复制节点及子节点。false为浅复制,仅复制本身节点。
⒀nomalize()方法:处理文档树中文本节点。
4) Document类型(针对document对象)
①Document类型表示文档,是HTMLDocument类型的一个实例,表示整个HTML页面。document对象是window对象的一个属性,可作全局对象访问。
②documentElement属性;该属性始终指向HTML页面中的元素。
③body属性;直接指向
④doctype属性:访问,各浏览器支持不一致。用处有限。
⑤title属性:可获得和设置title的文本。
⑥URL属性:地址栏中的URL。
⑦domain属性:页面的域名(可设置,有限制)
⑧referrer属性:保存链接到当前页面的那个页面的URL
⑨getElementById()方法:传入元素的ID,返回元素节点。
⑩getElementsByTagName()方法:传入元素名,返回NodeList。
□ 在HTML中返回一个HTMLCollection对象,与NodeList类似。
□ 访问HTMLCollection对象:方括号语法,item()方法,namedItem()方法,HTMLCollection对象还可通过元素的name特性取得集合中的项。
⑾getElementsByName()方法:返回带有给定name特性的所有元素。
⑿特殊集合,这些集合都是HTMLCollection对象。
□ document.anchors:包含文档中所有带name特性的元素。
□ document.applets:包含文档中所有的

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PHP學習筆記:資料結構與演算法概述:資料結構和演算法是電腦科學中非常重要的兩個概念,它們是解決問題和最佳化程式碼效能的關鍵。在PHP程式設計中,我們常常需要使用各種資料結構來儲存和操作數據,同時也需要使用演算法來實現各種功能。本文將介紹一些常用的資料結構和演算法,並提供對應的PHP程式碼範例。一、線性結構數組(Array)數組是最常用的資料結構之一,可以用來儲存有序的數據

dom是一種文件物件模型,同時也是用於html程式設計的接口,透過dom來操作頁面中的元素。 DOM是HTML文件的記憶體中物件表示,它提供了使用JavaScript與網頁互動的方式。 DOM是節點的層次結構(或樹),其中document節點為根。

vue3ref綁定dom或元件失敗原因分析場景描述在vue3中常用到使用ref綁定元件或dom元素的情況,很多時候,明明使用ref綁定了相關元件,但是經常ref綁定失敗的情況。 ref綁定失敗情況舉例ref綁定失敗的絕大多數情況是,在ref和元件綁定的時候,該元件還未渲染,所以綁定失敗。或是元件剛開始未渲染,ref未綁定,當元件開始渲染,ref也開始綁定,但是ref和元件並未綁定完成,這個時候使用元件相關的方法就會出現問題。 ref綁定的元件使用了v-if,或他的父元件使用了v-if導致頁面

1.原生js取得DOM節點:document.querySelector(選擇器)document.getElementById(id選擇器)document.getElementsByClassName(class選擇器)....2.vue2中取得目前元件的實例物件:因為每個vue的元件實例上,都包含一個$refs對象,裡面儲存著對應的DOM元素或元件的參考。所以在預設情況下,元件的$refs指向一個空物件。可以先在元件上加上ref="名字",然後透過this.$refs.

在網頁開發中,DOM(DocumentObjectModel)是一個非常重要的概念。它可以讓開發者輕鬆地對一個網頁的HTML或XML文件進行修改和操作,例如新增、刪除、修改元素等。而PHP內建的DOM操作庫也為開發者提供了豐富的功能,本文將介紹PHP中的DOM操作指南,希望可以幫助大家。 DOM的基本概念DOM是一個跨平台、獨立於語言的API,它可以將

dom和bom物件有:1、「document」、「element」、「Node」、「Event」和「Window」等5種DOM物件;2、「window」、「navigator」、「location」、「history」和「screen」等5種BOM物件。

bom和dom在作用和功能、與JavaScript的關係、相互依賴性、不同瀏覽器的兼容性和安全性考量等方面都有區別。詳細介紹:1、作用和功能,BOM的主要作用是操作瀏覽器窗口,它提供了瀏覽器窗口的直接訪問和控制,而DOM的主要作用則是將網頁文檔轉換為一個對象樹,允許開發者透過這個物件樹來取得和修改網頁的元素和內容;2、與JavaScript的關係等等。

dom 內建物件有:1、document;2、window;3、navigator;4、location;5、history;6、screen;7、document.documentElement;8、document.body;9、document.head;10、document .title;11、文檔.cookie。
