DOM学习-20180904-优快云博客

本文链接：https://blog.youkuaiyun.com/lizengbao/article/details/82387288

今日学习一点DOM；
###文本修改###
一、访问（获取）
1、getElementById()

语法；document.getElementById(“id名”)
———— 返回带有指定id名的元素。

<body>
	<p id="getText">使用getElementById()获取内容!</p>
<script>
	//获取id名为getText（此时内容无法在网页中打印出来）后,重新赋值给x,为以后引用简化代码。
	var x=document.getElementById("getText");
	//使用“document.getElementById("id名").innerHTML”的形式，此时内容可打印出来。
	document.write("<p>此时内容可打印出来: " + x.innerHTML + "</p>");
</script>
</body>

2、getElementsByTagName()

语法；document.getElementsByTagName(“标签”)
————返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

<body>
	<p>使用getElementsByTagName()获取内容1!</p>
	<p>使用getElementsByTagName()获取内容2!</p>
<script>
	var x=document.getElementsByTagName("p");
	//获取所有标签<p>内容后,重新赋值给x,为以后引用简化代码。
</script>
</body>

3、getElementsByClassName()
————返回包含带有指定类名的所有元素的节点列表。
————一般，不推荐使用。
二、删除
removeChild

语法；父节点.removeChild(子节点)

<div id="div1">
    <p id="p1">删除removeChild第一段。</p>
    <p id="p2">删除removeChild第二段。</p>
</div>
<script>
	//获取父节点。
	var parentnode=document.getElementById("div1");
	//获取子节点。
	var childnode=document.getElementById("p1");
	
	//删除父节点中的子节点。
	parentnode.removeChild(childnode);
</script>

三、替换（修改）
replaceChild()

语法；父节点.replaceChild(新子节点,原子节点);

<div id="div1">
	<p id="p1">替换（修改）replaceChild()内容1</p>
	<p id="p2">替换（修改）replaceChild()内容2</p>
</div>
 
<script>
	//创建新节点
	var newNode=document.createElement("p");
	//创建新节点的内容。
	var newNodeContent=document.createTextNode("这是替换后的文档段。");
	//把新节点的内容附加给新节点
	newNode.appendChild(newNodeContent);
	
	//获取父节点
	var p=document.getElementById("div1");
	//获取子节点
	var c=document.getElementById("p1");
	//在父节点p中，用新子节点newNode替换原子节点c
	p.replaceChild(newNode,c);
</script>

四、增加
1、插入子节点最后面

appendChild()
语法；父节点.appendChild(新子节点)

<div id="div1">
	<p id="p1">appendChild()插入子节点最后面1。</p>
	<p id="p2">appendChild()插入子节点最后面2。</p>
</div>
<script>
	//创建新子节点
	var newNode=document.createElement("p");
	//创建新子节点的内容。
	var newNodeContent=document.createTextNode("这是插入后的文档段。");
	//把新子节点的内容附加给新子节点
	newNode.appendChild(newNodeContent);
	
	//获取父节点。
	var p=document.getElementById("div1");
	//把新子节点插入父节点的末尾。
	p.appendChild(newNode);
</script>

2、插入在某子节点之前

insertBefore()
语法；父节点.insertBefore(新子节点,原子节点)

	<div id="div1">
	<p id="p1">insertBefore()在某子节点之前加新子节点内容1。</p>
	<p id="p2">insertBefore()在某子节点之前加新子节点内容2。</p>
</div>
 
<script>
	//创建新子节点
	var newNode=document.createElement("p");
	//创建新子节点的内容
	var newNodeContent=document.createTextNode("这是一个新段落。");
	//把新子节点的内容附加到新子节点中
	newNode.appendChild(newNodeContent);
	 
	//获取父节点
	var p=document.getElementById("div1");
	//获取子节点
	var c=document.getElementById("p1");
	//在父节点中，把新子节点插入原子节点的前面。
	p.insertBefore(newNode,c);
</script>