JavaWeb--初始JavaScript(3)

一、JS中的DOM对象

  1. Document对象
  2. Element对象
  3. 属性对象
  4. 文本对象
  5. Node节点对象

二、Document对象

常用方法如下:

1、write()

2、getElementById()

3、getElementsByName()

4、getElementsByTagName

三、Element对象

常用方法如下:

1、getAttribute("属性名称"):获取属性值

2、setAttribute("属性名称", "设置的值"):设置属性值

3、removeAttribute("属性名称"):删除属性

4、父标签.getElementsByTagName("标签名"):获取标签下面的所有子标签

四、Node对象

常用属性一:

1、标签节点对应的值
	nodeType: 1
	nodeName: 大写标签名称  比如SPAN
	nodeValue: null
	
2、属性节点对应的值
	nodeType: 2
	nodeName: 属性名称
	nodeValue: 属性的值
	
3、文本节点对应的值
	nodeType: 3
	nodeName: #text
	nodeValue: 文本内容

常用属性二:

1、attributes:包含的是一个节点的所有属性的集合

2、parentNode:获取该节点的父节点

3、childNodes:获取该节点的所有子节点(兼容性差)

4、firstChild:该节点的第一个子节点

5、lastChild:获取该节点的最后一个子节点

6、nextSibling:返回一个给定节点的下一个兄弟节点

7、previousSibling:返回一个给定节点的上一个兄弟节点

五、操作dom树

1、父节点.appendChild(子节点):添加子节点到末尾

2、父节点.insertBefore(newNode,oldNode):在某个节点之前插入一个新的节点

3、父节点.removeChild(子节点):删除指定节点

4、父节点.replaceChild(newNode,oldNode)方法: 替换节点

5、cloneNode(true):赋值节点,(参数true表示复制子节点,不需要则传递false即可)

操作dom树总结:

获取节点使用方法
	getElementById():通过节点的id属性,查找对应节点。
	getElementsByName():通过节点的name属性,查找对应节点。
	getElementsByTagName():通过节点名称,查找对应节点
插入节点的方法
	insertBefore方法:在某个节点之前插入
	appendChild方法:在末尾添加,剪切黏贴
删除节点方法
	removeChild方法:通过父节点删除
替换节点方法
	replaceChild方法:通过父节点替换

六、innerHTML属性

作用一:获取文本对象

作用二:向标签里面设置内容

你可能感兴趣的:(JavaWeb--初始JavaScript(3))