API-DOM节点操作、与BOM

API-DOM节点操作、与BOM

节点的特征

节点的类型：nodeType

节点的名称：nodeName

节点的值：nodeValue

一、document

nodeType：9

nodeName：#document

nodeValue：null

二、标签（元素）

nodeType：1

nodeName :大写的标签名

nodeValue：null

三、属性 getAttributeNode(‘属性名’) 获取元素的属性节点

nodeType：2

nodeName：属性名

nodeValue：属性值

四、文本 元素的第一个子节点就是文本节点 firstChild

nodeType：3

nodeName：#text

nodeValue：文本内容

节点之间的关系

1、父节点 parentNode

2、父元素节点 parentElement

相同点：都是父元素

不同点：parentNode html的父节点是#document

parentElement html的父元素是null

3、子节点 childNodes 子元素标签 文本节点 注释节点

4、子元素节点 children 子元素标签

5、第一个子节点 fristChild 文本节点

6、第一个子元素节点 firstElementChild 第一个子元素标签

7、最后一个子节点 lastChild 文本节点

8、最后一个子元素节点 lastElementChild 最后一个子元素标签

9、上一个子节点 previousSibling 文本节点

10、上一个子元素节点 previousElementSibling 元素节点

11、 下一个子节点 nextSibling 文本节点

12、下一个子元素节点 nextElementSibling 元素节点

fristChild lastChild previousSibling previousSibling 获取的都是文本节点

firstElementChild lastElementChild previousElementSibling nextElementSibling 获取的都是元素节点

节点隔行换色

1、子元素节点 children

2、子节点 childNodes 判断是否是元素节点

创建元素的三种方式

1、document . write()： 弊端：只能在body区域内添加标签

2、inneHTML： 弊端：覆盖掉原来的元素

3、创建元素：
document . createElement( ’ 标签名 ’ )
添加元素：父元素 . appendChild(创建的元素)
删除元素：removeChild()

动态的创建列表

BOM

方法：alert() onsrcoll() onload() prompt()

属性：全局的变量 console

window.console.log()

location属性

hash：地址栏上#及后面的内容

host：主机名及端口号

hostname：主机名

port：端口号

protocol：协议

href：路径

重新加载页面属性： window.location.reload()

history属性

back 返回上一页

forward 前进一页