javascript_DOM 编程艺术学习笔记（三）

最新推荐文章于 2024-08-12 22:28:07 发布

ssqfzc

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量346

点赞数

分类专栏： js基础文章标签： dom javascript 编程

本文链接：https://blog.csdn.net/ssqfzc/article/details/49887657

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

javascript_DOM 编程艺术学习笔记（三）

一、幻灯片切换的例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>
</head>
<body>
	<ul>
		<li><a href="images/1.jpg" οnclick="showPic(this);return false;">1</a></li>
		<li><a href="images/2.jpg" οnclick="showPic(this);return false;">2</a></li>
		<li><a href="images/3.jpg" οnclick="showPic(this);return false;">3</a></li>
		<li><a href="images/4.jpg" οnclick="showPic(this);return false;">4</a></li>
	</ul>
	<img src="images/5.gif" alt="猥琐男" id="placeholder">
	<script type="text/javascript">
		function showPic (element) {
			var picPath = element.getAttribute("href");
			var imgElement = document.getElementById("placeholder");
			imgElement.setAttribute("src",picPath);
		}
	</script>	
</body>
</html>

onclick里面的return false;如果不设置，那么就会进行跳转。

二、DOM节点属性

1、childNodes 获取任何一个元素的子元素

var bodyElement = document.getElementsByTagName("body");
alert(bodyElement[0].childNodes.length);

2、nodeType 节点的类型，都是使用数字来表示

<p id="description" name="description">choose an image!</p>

var descriptionNode = document.getElementById("description");

常用的nodeType

1）元素节点的nodeType属性值是1

alert(description.nodeType);

2）属性节点的nodeType属性值是2

alert(description.getAttributeNode("name").nodeType);

3）文本节点的nodeType属性值是3

alert(description.firstChild.nodeType);

3、nodeValue设置文本值

document.getElementsByTagName("p").firstChild.nodeValue = "呵呵";

4、firstChild第一个子元素

firstChild = node.childNodes[0];

5、lastChild最后一个子元素

lastChild = node.childNodes[node.childNodes.length-1]

ssqfzc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_DOM 编程艺术学习笔记（三）

javascript_DOM 编程艺术学习笔记（三）一、幻灯片切换的例子&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js example&lt;/title&gt;&lt;/head&gt;&a
复制链接

扫一扫

专栏目录