DOM学习笔记整理

来源：互联网发布：mac玩游戏卡编辑：程序博客网时间：2024/05/01 00:34

JS对象的分类：

(1)ES原生对象 Array String ...

(2)宿主(浏览器)对象

BOM——共有7个

DOM——共有N个

(3)自定义对象

1.BOM

BrowserObject Model，共有七个对象，可以让JS代码与浏览器交互。没有相关的行业标准，大部分浏览器基本都支持，但实现细节上存在浏览器兼容性问题。

window：指当前浏览器窗口对象 var window=new window();默认写入，不用写。

document：指当前浏览器加载HTML文档 var docunment=new document();同上。

history : 指当前浏览器的访问历史记录

screen : 指当前浏览器所在的显示屏幕

location : 指当前浏览器所显示的页面的URI

event : 指当前浏览器加载元素、与用户交互过程中产生的事件

navigator : 指当前浏览器对象

2.DOM

DocumentObject Model，共有N个对象，可以让JS代码与浏览器当前加载的HTML文档交互。W3C提供了具体的标准，由各个浏览器厂家实现此标准，但仍有些细微的差别。

Image

Table

TableRow

TableCell

Input

Form

....

HTML DOM 中的一些基础概念:

浏览器把载入的任意一篇HTML文档都生成一个document对象；把这篇文档的结构看做一种“树型结构”，document对象是根，HTML文档中任意内容都是一个节点(Node)。故节点可以分为下述类型：

(1)documentnode

(2)element node

(3)text node

(4)attributenode

(5)comment node

节点和节点间有如下关系：

(1)parent node：每一个节点都有且只有一个parent node

(2)child node：每个节点可以有0~N个child node

(3)first child：一个父节点的第一个子节点称为first child

(4)last child：一个父节点的最后一个子节点称为last child

(5)previoussibling：上一个兄弟节点，一个节点有0~1个previoussibling

(6)next sibling：下一个兄弟节点，一个节点有0~1个next sibling

在一个DOM树中查找一个有哪些节点方法：

(1)直接从根节点一级一级查找——查找速度最快！但太繁琐！

vara = document.lastChild.lastChild.childNodes[3];

(2)通过元素的ID在整篇文档中查找——查找速度仅慢于方式(1)

vara = document.getElementById("search");

(3)根据标签名查找同中类型的所有元素——查找速度很慢

varlist = document.getElementsByTagName('span'); //返回一个类数组对象

(4)根据class名来查找元素

varlist = document.getElementsByClassName('red');

(5)根据name值来查找元素(主要用在FORM中)

varlist = document.getElementsByName( 'hobby' );

查询元素的方法

(1)dom节点父子关系查找法

(2)document.getElementxByXxx()

(3)node.querySelector('选择器') //返回第一个

node.querySelectorAll('选择器') //返回所有

(4)几个特殊标签的快速选择法

<html>： document.documentElement

<head>: document.head

<body>: document.body

节点树vs元素树

节点树

元素树

节点有若干类型：文档、文档类型、元素、文本、注释、属性....

节点只有两个类型：元素(标签)、文档

parentNode

parentElementNode

childNodes

children

firstChild

firstElementChild

lastChild

lastElementChild

previousSibling

previousElementSibling

nextSibling

nextElementSibling

创建新的节点并添加到现有的节点树上:

创建一个新的元素节点：

var node = document.createElement( '标签名' ) ; //此时此元素只存在于内存中

创建一个新的文本节点：

var txt = document.createTextNode( '文本内容' ) ;

创建一个文档片段对象：

var fragment = document.createDocumentFragment( );

文档片段对象：它本身不对应任何HTML标签，作用类似于一块透明胶布(本质就是内存中的一块空间)，可以容纳其他的节点对象，把需要添加到DOM树上的所有节点先暂时添加到一个文档片段中，最后把这个文档片段一次性的添加到DOM树上，只需要浏览器重新绘制整个页面一次即可，从而防止多次绘制页面造成的“频闪”问题。

可以使用下述方法把刚创建的节点插入到指定的位置：

parentNode.appendChild(child ); //把child追加为parentNode的最后一个子节点

parentNode.insertBefore(newChild, existingChild ); //在父节点中当前的existingChild之前添加一个新子节点newChild

0 0