码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript DOM编程

时间:2015-07-17 16:16:42      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

1.获取dom树的根节点

<script type="text/javascript">
  	//Document对象的documentElement属性:直接指向HTML页面中的根标签.
	console.info(document.documentElement);
  </script>
技术分享

2.getElementById:根据标签的id获取标签元素和getElementsByTagName根据标签名获取标签,返回的是数组的形式

<script type="text/javascript">
	//获取HTML页面中id="username"标签.
	var username = document.getElementById("username");
	alert(username.value);
	var inputs = document.getElementsByTagName("input")[0];
	alert(inputs.value)
  </script>
3.getElementsByNames:根据标签的name属性获取标签,返回的是数组形式

 <body>
	<input type="text" id="username1" name="username" value="username1">
	<input type="text" id="username2" name="username" value="username2">
  </body>
  <script type="text/javascript">
  	//获取HTML页面中name="username"标签.
	var usernames = document.getElementsByName("username");
	alert(usernames.length);
	//分别打印出每一个name="username"标签的value属性值
  </script>
有两个input标签,因此打印结果是2

4.创建标签

<body>
    <ul id="city">
    	<li id="bj">北京</li>
		<li id="tj">天津</li>
		<li id="nj">南京</li>
    </ul>
  </body>
  <script type="text/javascript">
  	//创建<li id="sh">上海</li>标签,将此标签添加到id="city"标签下.
		//1 创建<li id="sh">上海</li>
			//a 创建<li></li>元素节点
			var liElement = document.createElement("li");
			//b 创建"上海"文本节点
			var text = document.createTextNode("上海");
			//c 通过元素节点添加子节点的方式,把文本节点添加上.
			liElement.appendChild(text);
			//li标签叫做元素节点,也可以叫做元素.如果当作元素解析的话,属性就是元素的属性.
			liElement.setAttribute("id","sh");
		//2 获取id="city"标签
		var city = document.getElementById("city");
		//3 添加
		city.appendChild(liElement);
  </script>
技术分享



关于树结构的说明:两种解析dom树的方式:元素方式和节点方式

元素与节点的区别:

利用元素解释HTML页面:

 标签就是元素,文本就是元素的文本,属性就是元素的属性.

利用节点解释HTML页面:

 标签是元素节点,文本是文本节点,属性是属性节点.


版权声明:本文为博主原创文章,未经博主允许不得转载。

javaScript DOM编程

标签:

原文地址:http://blog.csdn.net/u014010769/article/details/46927389

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!