阅读 67

DOM概览

node节点,一共有10个重要属性:

nodetype,得到1-12的数字,对应着不同的节点类型,

nodeName,得到节点名称

nodeValue,得到节点值,string类型,不一定存在,没有值的时候返回null

childNodes,得到子节点,返回列表(伪数组)

parentNode,得到父节点

previousSIbling,得到前一个兄弟节点

nextSibling,下一个兄弟节点

firstChild,第一个子节点

lastChild,最后一个子节点

ownerDocument,当前文档的文档节点

7个方法:

hasChildNodes(),判断有没有子节点,返回布尔值

appendChild(),插入节点

insertBefore(a,b) b为参照节点

removeChild(a)a为要删除的节点

replaceChild(a,b)替换子节点,拿a替换b

cloneNode(true/false),选true为深复制,方法和子节点一并克隆,返回新克隆的节点

normarLize()标准化,针对文本节点而言


dom树上的每一个节点都是node对象,12种类型,3种最常见

document节点------代表整个文档,也就是整个html,本身是window的属性,也就是全局变量,有几个重要的属性:

documentElement,指的是<html>标签里的内容

body,指的是<body>标签里的内容

title,指的是整个页面的标题,也就是head标签里的title属性,可以直接修改document.title

domain,指的是整个页面的域名信息,可读可写,但是不同于location.href,domain只能从低级域名向高级域名改

referer,可返回载入当前文档的文档的 URL


element节点,遇上的节点大部分都是element节点,它的一些重要属性:

nodeType是1,

dir代表当前语言方向(ltr,rtl),

className,注意不是class

如何获取节点:

1,Document.getELementById

2,Document.getELementsByName,获取的伪数组

3,Document.getELementsByClassName,获取的伪数组

4,Document.getELementsByTagName,获取的伪数组

5,querySelectAll,获得伪数组

6,querySelector

如何创建节点:

Document.creatElement()接收字符串,或者标签名,或者一段html


节点的标准特性(自带的):

1,对于html是不区分大小写的,js是区分大小写的,不管html里是大写还是小写,js中操作必须是转换成小写,如果是多单词结合,应该转换成驼峰写法,如果有关键字,前面要加上html,比如html中lable标签的for属性要改成htmlFor

2,html标签里的属性永远是字符串类型,而js中获取的并不一定,比如input的maxLength是数字类型,checked为布尔类型

3,js获取的style是一个样式对象

4,这些属性只能获取和设置,不能删除

读写节点的标准特性和非标准特性(自定义的),和点语法不同的是,得到的永远是字符串类型;关键字正常使用,比如getAttribute(“class”):

getAttribute(), 

setAtrribute(),

hasAtrribute(),

removeAtrribute()

html5增加了dataSet属性,保证了自定义属性的合法性,dataSet属性在html中不支持驼峰命名,比如:

data-first-name,js中可以用dataSetfirstName获取

dataSet属性是一个双向的接口,也就是在js中可以实时地操作此属性

优点:

1、自定义属性合法化

2、方便管理

3、说明支持html,也指出css3,可以把属性选择器和dataSet属性结合起来使用

attributes属性可以把元素节点的所有属性枚举出来,是一个伪数组的形式,但是既可以用下标来定位,也可以用key来定位


文本节点:

文本节点里面包含的可以是纯文本,也可以是转义后的html节点

一点方法:

appendData(a)

deleteData(a,b)

insertData(a,b)

replaceData(a,b,c)

spliceData(a)

subStringData()

创建文本节点:

Document.creatTextNode()






文章分类
前端