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>
感悟：如果想改变一个标签，首先要拿到这个标签，让后对其做出操作
