JavaScript---DOM

本文主要是介绍JavaScript---DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、Node

1.节点关系

每个节点都有一个 childNodes 属性，其中包含一个 NodeList 实例。

	const $app = document.getElementsByClassName('app')[0]
	console.log($app.childNodes)

• previousSibling
• nextSibling
• firstChild
• lastChild
• childNodes[n] / childNodes.item(n)
• parentNode

2.操纵节点

加入节点

appendChild（）
insertBefore（要插入的节点，参照节点）

	let returnNode = someNode.appendChild(someNode.firstChild)
	returnNode = someNode.insertBefore(newNode,null)

代替节点

replaceChild（插入的节点，要替换的节点）

	// 代替第一个节点
		let returnNode = someNode.replaceChild(newNode,someNode.firstChild)

删除节点

removeChild（）

	someNode.removeChild(someNode.firstChild)

克隆节点

cloneNode(bool)

true: 深复制，复制节点及整个子DOM树。
false：浅复制，只复制调用该方法的节点。

二、document类型

文档信息：

• document.title // 读取文档标题
• document.URL // 读取完整URL
• document.domain // 取得域名
• document.referrer // 取得来源

特殊集合：

• document.anchors // 获取带name属性的a标签
• document.forms // 获取文档中所有form元素
• document.images
• document.links // 获取带href属性的a元素

文档写入：

• document.wirte（）
• document.open（）
• doxument.close（）

三、Element类型

属性：

• getAttribute
• setAttribute（属性名，属性值）
• removeAttribute

四、操作表格

• caption
• tBodies
• tFoot
• tHead
• rows
• createTHead
• createTFoot
• insertRow
• rows
• cells
• insertCell

	let table = document.createElement('table')
	table.border = 1
	table.width = "100%"
	
	let tbody = document.createElement('tbody')
	table.appendChild(tbody)
	
	tbody.insertRow(0)
	tbody.rows[0].insertCell(0)
	tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1, 1"))
	tbody.rows[0].insertCell(1)
	tbody.rows[0].cells[1].appendChild(document.createTextNode("celll 2, 1"))

五、搜索

querySelector（CSS选择符） // 匹配该模式的第一个后代元素

let $app = document.querySelector(".app")	// 取得类名为app的第一个元素

querySelectorAll（） // 返回所有匹配的项

六、元素遍历

• childElementCount
• firstElementChild
• lastElementChild
• previousElementSibling
• nextElementSibling

这篇关于JavaScript---DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！