1.可以动态获取网页中所有的标签（节点）
2.可以对获取到的标签进行增删改查CRUD
document.write('helloword');
document.write('<input type="file">');
document.write(' ');
3. document的常用操作
-
1.获取网页中的图像标签,改变src的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>8.document的常用操作</title> <script> function changeImg() { // 1.获取网页中的图像标签 var image = document.getElementsByClassName('icon')[0];// 要string类型 console.log(image); // 2.改变src的属性 image.src='js/image/icon_05.png'; } </script> </head> <body>  <p></p> <button onclick="changeImg();">更换图片</button> </body> - 对标签的操作，拿到所有要操作的标签，监听按钮的点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9.document的常用操作2</title>
</head>
<body>
<p id="word">这里风景很美</p>
<p></p>
<button>隐藏</button>
<script>
//1.拿到所有要操作的标签
var icon = document.getElementsByClassName('icon')[0];
var p = document.getElementById('word');
var btn = document.getElementsByTagName('button')[0];
//2.监听按钮的点击
btn.onclick = function () {
if(btn.innerText == '隐藏')
{
// 隐藏 css属性 display
p.style.display = 'none';
icon.style.display = 'none';
btn.innerText = '显示';
}else {
// 隐藏 css属性 display (还原本来的标签类型)
p.style.display = 'block';
icon.style.display = 'inline-block';
btn.innerText = '隐藏';
}
}
</script>
</body>
</html>
显示与隐藏
感悟：如果想改变一个标签，首先要拿到这个标签，让后对其做出操作
网友评论