JSDOM模型的样例

最新推荐文章于 2021-11-17 23:16:27 发布

耐耐~

最新推荐文章于 2021-11-17 23:16:27 发布

阅读量726

点赞数 2

分类专栏： # js(停更)

本文链接：https://blog.csdn.net/f156207495/article/details/78183740

版权

js(停更) 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考自：http://www.w3school.com.cn/js/js_htmldom_html.asp

1.查找HTML元素

（1）利用getElementById()方法

实现点击元素改变文字内容：

<!doctype html>
<html>
	<head>
		<title>
			利用id方法查找
		</title>
		<meta charset = 'utf-8'>
	</head>
	<body>
		<span id = 'www' onclick = 'change()'>这是要改变的文字</span>
	</body>
	<script>
		function change(){
			var pass = document.getElementById('www')
		pass.innerHTML = '我已经改变你了，哈哈！！！'
		}
		</script>
</html>

（2）利用getElementsByTagName()方法

实现点击元素改变文字内容：

<!doctype html>
<html>
	<head>
		<title>
			利用TagName方法查找
		</title>
		<meta charset = 'utf-8'>
	</head>
	<body>
		<p onclick = 'change()'>这是要改变的文字</p>
		<p>不要改变我啊！！！</p>
	</body>
	<script>
		function change(){
			var pass = document.getElementsByTagName('p')
		pass[0].innerHTML = '我已经改变你了，哈哈！！！'
		pass[1].innerHTML = '我已经改变你了，哈哈！！！'
		}
		</script>
</html>

（3）利用getElementsByClassName()方法

（4）利用getElementsByName()方法

注意：凡是有s的函数，都返回对象的几个，只有第一个函数返回一个对象。

这些方法参考自：http://blog.csdn.net/ernijie/article/details/51332534

2.改变HTML文档

（1）改变HTML文档输出流：

直接利用write函数

创建了一个覆盖文档的例子和一个不会覆盖当前文档的例子：

<html>
	<head>
		<title>
			利用TagName方法查找
		</title>
		<meta charset = 'utf-8'>
		<script>
			function recreate(){
				document.write('糟糕！！！重新创建了一个文档！！！')
			}
		</script>
	</head>
	<body>
		<p οnclick='recreate()'>这是原生段落</p>
	</body>
	<script>
		document.write('这是新加进来的段落')
	</script>
</html>

（2）改变HTML文档内容，利用innerHTML

前面的例子也多有用到，也可以参考这个http://blog.csdn.net/f156207495/article/details/78125332

（3）改变HTML属性

实现图片src属性的变换

可以利用document.geetElementById('xx').src来改变

<!doctype html>

<html>
	<head>
		<title>这是利用js来实现根据不同的日期更新图片</title>
		<meta charset ='utf-8'>
	</head>
	
	<body>

		<img src="0" alt="这是图片" id='weekday'>
	</body>
	<script language="JavaScript"> 
		var MyDate = new Date()
		var num = MyDate.getDay()
		var tx = new Array(7)
		document.write(num)
		tx[1]='tx_array\\1.jpg'
		tx[2]='tx_array\\2.jpg'
		tx[3]='tx_array\\3.jpg'
		tx[4]='tx_array\\4.jpg'
		tx[5]='tx_array\\5.jpg'
		tx[6]='tx_array\\6.jpg'
		tx[0]='tx_array\\7.jpg'
		
		var week = document.getElementById('weekday')
		week.src = tx[num]
	</script>
</html>

3.改变元素的样式属性，即CSS

点击元素，文字变红。

可以利用document.getElementById.style.某个属性=***

<!doctype html>

<html>
	<head>
		<title>改变HTML元素的样式属性</title>
		<meta charset ='utf-8'>
	</head>
	<body>
		<p onclick = 'change()'>这是需要改变的文字，看我变红变红！！！</p>
	</body>
	<script language="JavaScript"> 
			function change()
			{
				document.getElementsByTagName('p')[0].style.color = 'red'
			}
	</script>
</html>

4.对HTML事件做出反应

前面已经有很多对事件的处理样例了，这里说一下在JavaScript中增加事件属性。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

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

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

<p id="demo"></p>

</body>
</html>

5.添加或修改HTML元素

添加和删除HTML元素混合在一个代码里了：

<!doctype html>
<html>
	<head>
		<title>
			HTML元素的添加和查找
		</title>
		<meta charset = 'utf-8'>
	</head>
	<body>
		<div id = 'pp'>
		<p id ='p1'>这是一个段落</p>
		<p id = 'p2'>这是第二个段落</p>
		</div>
	</body>
	<script>
		var para = document.createElement('p');
		var node = document.createTextNode("这是新段落")
		para.appendChild(node)
		var element = document.getElementById('p2')
		element.appendChild(para)//添加新段落
	        var parent = document.getElementById('pp')
		var child = document.getElementById('p2')
		parent.removeChild(child)//删除段落
	</script>
</html>

添加HTML元素要先创建一个p元素，然后创建文本节点，再向p元素添加该文本节点，然后找到一个父节点，再向该父节点中添加该p元素即可。

删除HTML元素要先找到删除节点所在的父节点，然后再找到需要删除的节点，然后再用removeChild这个语法来删除该元素

耐耐~

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JSDOM模型的样例

参考自：http://www.w3school.com.cn/js/js_htmldom_html.asp1.查找HTML元素（1）利用getElementById()方法实现点击元素改变文字内容：利用id方法查找这是要改变的文字 function change(){ var pass = document.get
复制链接

扫一扫