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()