JavaScript与Dom基础总结

DOM(Document Object Model),即文档对象模型。

浏览器在加载网页时,会根据网页中的元素创建文档对象模型树。

Dom树

JavaScript与DOM交互常用的方法:

document.write("output text.");

doctment.getElementById("element_id");

通过document.write()方法,可以输出任意字符。常见的用法是输出一段HTML格式的标签给浏览器解析。

document.write('<p> 文字标题 </p>');

doctment.getElementById("element_id");返回的是特定id的元素对象。

获取的元素element也有自己的方法(getElementsByTagName),如下所示:

<div id="main">
	<p>The DOM is very useful.</p>
	<p>very well!</p>
</div>

var element=document.getElementById("main");
var subElement=element.getElementsByTagName("p");
document.write('div中的第一段p标签文本是:' + subElement[0].innerHTML);

这里需要注意innerHTML属性,代表的是元素的文本内容。

获取的元素都有其特定的属性,这里举例常见的可操作属性:

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

---------------------------------------------------

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

---------------------------------------------------

<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

---------------------------------------------------

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

---------------------------------------------------

<script>
	function changetext(id)
	{
		id.innerHTML="谢谢!";
	}
</script>
<h1 onclick="changetext(this)">请点击该文本</h1>

---------------------------------------------------

<button id="myBtn">点击这里</button>

<script>
	document.getElementById("myBtn").onclick=function(){displayDate()};
	function displayDate()
	{
		document.getElementById("demo").innerHTML=Date();
	}
</script>

还可以创建和删除DOM的元素,动态的调整DOM树:


<body> 
<div id="textNode">测试增删</div> 
<input onclick="insertNode('change?')" type="button" value="insert"/> 
<input onclick="removeCreateNode()" type="button" value="remove"/> 
</body> 

<script> 
  function insertNode (strText) { 
    alert("插入元素前的body HTML: " +document.body.outerHTML); 
    var node = document.createElement("DIV"); 
    var myNode = document.getElementById("textNode"); 
    node.innerHTML = strText; 
    document.body.insertBefore(node,myNode); 
    alert("插入元素后的body HTML: " +document.body.outerHTML); 
} 

   function removeCreateNode() { 
     alert("移除元素前的body HTML: " +document.body.outerHTML); 
     var node = document.getElementById("textNode"); 
     node.parentNode.removeChild(node); 
     alert("移除元素前的body HTML: " +document.body.outerHTML); 
} 
</script> 

这里使用了object.outerHTML,作用是得到一个该元素的HTML标签内容(包括标签自身),这样会更容易看到插入删除的效果。

上面说到的就是JavaScript动态的操作DOM树,在浏览器中向用户动态的展示页面,并且不需要使用额外的网络请求,能迅速对用户的操作给予响应,增加了用户体验,常见的应用实例有表单数据验证等。

文章来自 http://skymonkey.cn/

高能广告区

暂无广告哦=^^=。继续看看其它文章吧!