nodeType 属性值是代表节点类型的数字 只读
节点类型:
- 元素节点 -> 1
- 属性节点 -> 2
- 文本节点 -> 3
- 注释节点 -> 8
- document节点 -> 9
- DocumentFragment节点 -> 11
nodeName 属性值取决去节点类型 ,只读,不能写
- 元素节点值为大写的元素标签名 document.body.nodeName //"BODY"
- document节点值为 "#document" document.nodeName //"#document"
- 文本节点的nodeName值为 "#text"
- 注释节点的nodeName值为 "#comment"
nodeValue 属性值是Text节点或Comment节点的文本内容 ,可读可写
hasChildNodes()方法 判断当前节点是否有子节点,有返回true,否则false
ownerDocument 属性表示指向整个文档的文档节点,通过这个属性不能层层回溯到顶端,而是可以直接访问文档节点。
normalize() 将多个相邻文本节点合并
splitText() 将一个文本节点分割成两个文本节点,按照指定位置分割nodeValue值,原来的节点包含从开始到指定位置之前的值,新文本节点将包含剩下的值。
返回新文本节点。分割文本节点是从文本提取技术的一种常用Dom解析技术。
遍历(查)节点树 都是只读
parentNode 属性指向父节点
childNodes 子节点们,一个nodeList对象里面存放子节点们,基于Dom结构动态执行查询结果,当Dom结构变化时能自动反应在NodeList对象中,是个类数组。
firstChild 第一个子节
lastChild 最后一个子节点
nextSibling 后一个兄弟节点
previousSibling 前一个兄弟节点
遍历(查)元素节点树 都是只读
parentElement 当前元素父元素节点
children 子元素节点们
firstElementChild 第一个元素节点
lastElementChild 最后一个元素节点
nextElementSibling 后一个兄弟元素节点
previousElementChild 前一个兄弟元素节点
操作某个节点的子节点(NodeList列表),也就是说要使用下面的方法必须先取得父节点
appendChild() 1个参数:要插入的节点,返回要添加的节点。
该方法向NodeList列表末尾添加节点,如果传入的节点是文档的一部分了,就会将原来位置的节点转移到最后一个。
insertBefore() 2个参数:要插入的节点,作为参照的节点,返回要插入的节点。
如果第二个参数为null,则与appendChild操作相同
replaceChild() 2个参数:要插入的节点,要替换的节点,返回要被替换的节点,同时要插入的节点占据其位置。
removeChild() 1个参数:要移除的节点,返回要移除的节点
cloneNode() 1个参数 true 或 false,返回复制的节点。
true深克隆:复制节点及整个节点子树,false浅克隆:只复制节点本身。
document下的属性
document.title 取得<title>元素中的文本--显示在浏览器窗口的标题 可修改
document.URL 取得地址栏显示的url
document.domain 取得域名 可修改
document.referrer 取得来源页面的url
document.documentElement 取得对<HTML>的引用
document.body 取得对<body>的引用
html5 document新增属性
document.head 取得对<head>的引用
document.readState 有两个可能的值:loading 正在加载完文档 complete:已经加载文档
获取元素引用的属性和方法
只有HTMLDocument类型才有的方法
- getElementById()
- getElemenstByName() 返回带有给定name特性的所有元素(一个HTMLcollection对象)
HTMLDocument 和 HTMLElement 类型都有的方法
- getElementsByTagName() 返回一个HTMLcollection对象
- getElementsByTagName("*") 返回文档上的所有元素个HTMLcollection对象
- getElementsByClassName() 返回个HTMLcollection对象
- querySelector() 参数可根据css的写法 返回符合条件的第一个元素
- querySelectorAll() 返回符合条件的NodeList对象
HTMLcollection对象下的属性 namedItem() 通过元素的name特性取得集合中的项。也可以同过中括号里面放字符串,在后台会自动调用namedItem方法。
document下的一些特殊集合,这些集合都是HTMLCollection对象
document.anchors 包含文档中所有带name特性的a元素
document.forms 包含文档中的所有<form>元素 与document.getElementByTagName("form")得到的结果相同
document.images 包含文档中所有的<img>元素 与document.getElementByTagName("img")得到的结果相同
document.links 包含文档中所有带href特性的<a>元素
每个HTML元素都存在下列标准特性 都可修改
id : 文档中唯一标识符
title : 有关元素附加说明信息,鼠标滑过才会出现提示
dir : 语言的方向,值为 ltr left-to-right 从左往右。rtl 从右往左。
className : 元素指定的css类。
例:<div id="myDiv" class="bd" title="Body text" dir="ltr"></div
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.dir); //"ltr"
取得特性,每个元素都有一或多个特性 。所有的特性都是属性,直接给属性赋值就可以给特性赋值。
getAttribute() 取得元素的特性值(可以是自定义特性)
setAttribute() 设置元素的特性值(可以是自定义特性)两个参数:要设置的特性名 特性值
removeAttribute() 删除元素的特性
创建节点
document.createElement() 创建元素节点
documente.createTextNode() 创建文本节点
document.createComment() 创建注释节点
document.createDocumentFragment() 创建文档碎片节点
webkitMatchesSelector() 参数:css选择符。 如果调用元素与该选择符匹配返回true,否则false
操作类名:元素的classList属性,包含一个DOMTokenList对象。这个元素下的类名列表 classList下有如下方法
add(value) 将给定的字符串添加到列表中。 添加类名
contains(value)元素是否有给定的类名 有返回true,否则false
remove(value) 从列表中删除给定类名
toggle(value)列表中有给定类名删除,没有就添加这个类名
插入HTML文本
innerHTML
outerHTML
insertAdjecentHTML()方法 两个参数:插入位置 要插入的HTML文本
其中第一个参数只能是下列值之一
插入兄弟元素
- "beforebegin":当前元素之前插入兄弟元素
- "afterend" :在当前元素之后插入兄弟元素
插入子元素
- "afterbegin" : 在当前元素之下的一个子元素之前插入新的子元素
- "beforeend" : 在当前元素之下的最后插入子元素
Element 元素下的方法
ScrollIntoView() 元素调用这个方法可以出现在视口中 参数:true:元素顶部与视口顶部平齐 false:元素底部与视口底部平齐
contains() 调用元素时候包含参数元素 包含true 不包含false