1.innerText和innerHTML的区别
document.getElementByTagName(" ").innerText = "元素中显示的文本内容";
document.getElementByTagName(" ").innerHTML = "如果含有元素标签,则标签进入dom树";
具体如下:
<p>我是段落</p>
<script>
var el = document.getElementByTagName("p");
el.innerText = "<span>我是innerText</span>";//el:<p><span>我是innerText</span></p> //文本内容:<span>我是innerText</span>
el.innerHTML= "<span>我是innerHTML</span>";//el:<p><span>我是innerText</span></p> //为文本增加了p标签,文本内容:我是innerHTML
</script>
2.节点访问及Dom操作
以下面小段html为例:
<div id = "mydiv">
<p id= "p1">我是第一个段落</p>
<p class = "p2">我是第二个段落</p>
</div>
节点访问
(1)getElementById() 方法返回带有指定 ID 的元素:
var element = document.getElementById("mydiv");
(2)getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点(以数组形式输出):
var element = getElementsByTagName("p");
(3)getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表:
var element = getElementsByClassName("p1") ;
DOM操作
(1)修改html的内容
<script type = "text/javascript">
var el = document.getElementById("p1");//获取id为p1的元素
el.innerHTML="New text!";;//将该元素的内容改为New text!
</script>
(2)修改html的属性
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";//改变图片地址
document.getElementById("image").setAttribute('class','pic');//增加class="pic"
</script>
(3)添加新元素
在父元素末尾添加孩子节点(appendChild)
<div class="d1">
</div>
<script>
var para=document.createElement("p");
para.innerHtml="我是新添加的段落";
var element=document.getElementsByClassName("d1");
element.appendChild(para);//增加为最后一个子孩子
</script>
//增加之后DOM元素如下
<div class = "dl">
<p>我是新添加的段落</p>
</div>
在兄弟节点前添加节点(insertBefore)
<script>
var para2=document.createElement("div");
para2.innerHtml="我是新添加的div";
var element=document.document.getElementsByTagName("p") ,
parent=document.getElementsByClassName("d1");
parent.insertBefore(para2,element);//在p元素前增加一个div
parent.removeChild("p");//删除元素p
</script>
//增加之后DOM元素如下
<div class = "dl">
<div>我是新添加的div</div>
<p>我是新添加的段落</p>
</div>
//删除之后
<div class = "dl">
<div>我是新添加的div</div>
<p>我是新添加的段落</p>
</div>
(4)改变元素样式
<p id="p1">我是段落,要变色</p>
<button>变色</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
document.getElementById('p1').style.color="red";
}
</script>
(5)替换元素
replaceChild
var btn1 = document.getElementById("btn1");//获取旧按钮
var btn3 = document.createElement("button");//创建新按钮
btn3.id = "btn3"; //<button id="btn3">新按钮</button>
btn3.innerText = "新按钮";
c1.replaceChild(btn3, btn1);