四、获取 / 修改元素属性
1. 获取元素属性
<body> <img src="male.png" alt="男孩" title="这是男孩"> <script> let img = document.querySelector('img'); console.log(img); //dir 可以将当前元素的详细情况打印出来 console.log(img.src); console.log(img.alt); console.log(img.title); console.dir(img); </script> </body>
我们以一个内容为图片的标签为例，观察 log 方法和 dir 方法的区别。dir 可以显示非常详细的信息，在下面的截图中，我并没有截完 img 元素中所有的属性。而 log 方法可以一个个的获取 img 的属性。
展示结果：
2. 修改元素属性
<body> <img src="male.png" alt="男孩" title="这是男孩"> <script> let img = document.querySelector('img'); img.onclick = function() { if(img.title == '这是男孩') { img.src = 'female.png'; img.alt = '这是女孩'; img.title = '这是女孩'; } else { img.src = 'male.png'; img.alt = '这是男孩'; img.title = '这是男孩'; } } </script> </body>
我们通过上面的程序，将 img 标签的属性进行修改，从而用鼠标点击，达到图片互换的效果。
此外，应注意：
在 JS 中，判断两个字符串的内容是否相等，直接通过 “==” 即可判断，而在 Java 中，是通过 equals 方法来进行判断的。然而，大部分的语言都是通过两个等号进行判断的，C / Java 是例外。
展示结果：
五、获取 / 修改表单元素属性
表单元素对应的属性，主要是指 input 标签的一些属性。常用的属性可以通过 DOM 来修改，如下：
value: input 的值 disabled: 禁用 checked: 选中复选框 selected: 选中下拉框 type: input 的类型(文本, 密码, 按钮, 文件等)
展示1 播放与暂停按钮之间的切换
<body> <input type="button" value="播放"> <script> let button = document.querySelector('input'); button.onclick = function() { if(button.value == '播放') { button.value = '暂停'; } else { button.value = '播放'; } } </script> </body>
展示结果：
展示2 设计全选框功能
<body> <h3>请选择你想要的机器人</h3> <input type="checkbox" class="child"> 卡布达 <br/> <input type="checkbox" class="child"> 金龟次郎 <br/> <input type="checkbox" class="child"> 车轮滚滚 <br/> <input type="checkbox" class="child"> 卡布达 <br/> <input type="checkbox" class="child"> 呱呱蛙 <br/> <input type="checkbox" class="all"> 全选 <br/> <script> let all = document.querySelector(".all"); let childs = document.querySelectorAll(".child"); all.onclick = function() { for(let i=0; i<childs.length; i++) { //将每个 child 属性设置选中功能 childs[i].checked = all.checked; } } //每个单选框也影响着全选框 for(let i=0; i<childs.length; i++) { childs[i].onclick = function() { all.checked = checkChild(); } } //如果当前某个选项未被选中，那么就取消选中全选框 //如果所有选项都被选中，那么就选中全选框 function checkChild() { for(let j=0; j<childs.length; j++) { if(!childs[j].checked) { return false; } } return true; } </script> </body>
展示结果：
六、修改样式属性
JS 不仅可以更改 html 的一些属性，还可以对 CSS 的设置样式进行修改。
展示1 行内样式修改
设计一个 鼠标点击数字，不断调大的场景。
<body> <div style="font-size: 20px;">卡布达</div> <script> let div = document.querySelector('div'); div.onclick = function() { //div.style.fontSize 返回的是一个字符串，需要用 parseInt 转换成数字类型 //parseInt 在转换过程中，若遇到了非数字的字符，就会立即转换结束 let fontSize = parseInt(div.style.fontSize); fontSize = fontSize + 10; div.style.fontSize = fontSize + 'px'; //带上单位 } </script> </body>
展示结果：
注意：
① 在 CSS 中，使用的命名法为 font - size，而在 JS 中应使用 fontSize，因为 JS 并不支持脊柱命名法。
② parseInt 函数，在转换过程中，若遇到了非数字的字符，就会立即转换结束。
③ 展示1 是针对 CSS 行内样式的操作，但此情况仅适用于修改较少的场景。
展示2 类名样式修改
设计一个能白天模式和夜间模式相互切换的场景。
<body> <div class="day"> 卡布达<br/> 卡布达<br/> 卡布达<br/> 卡布达<br/> 卡布达<br/> </div> <style> .day { background-color: white; color: black; } .night { background-color: gray; color: white; } </style> <script> let div = document.querySelector('div'); div.onclick = function() { //indexOf 方法的目的是用来查找子串是否存在，存在则返回下标，不存在则返回 -1 if(div.className.indexOf('day') != -1) { div.className = 'night'; } else { div.className = 'day'; } console.log(div.className); } </script> </body>
展示结果：
七、操作节点
//1. 创建元素节点 let element = document.createElement(); //2. 插入节点到 DOM 树中 //parent 代表 节点 a, x, y 的父节点 parent.appendChild(a);//将节点a 插入到指定节点的最后一个孩子之后 parent.insertBefore(x, y)//将节点x 插入到节点y 之前
展示1
<body> <div class="parent"> <div class="aaa">卡布达</div> <div class="bbb">金龟次郎</div> <div class="ccc">呱呱蛙</div> </div> <script> let div = document.createElement('div'); div.id = 'myDiv'; div.className = 'box'; div.innerHTML = 'hello world'; </script> </body>
当我们创建好一个节点的时候，发现并没有显示在页面上。为什么？这是因为新创建的节点并没有加入到 DOM 树中。所以说，光创建一个节点，内存中确实是存在了，但对结果来说，并没有什么用。
展示结果：
展示2
<body> <div class="parent"> <div class="aaa">卡布达</div> <div class="bbb">金龟次郎</div> <div class="ccc">呱呱蛙</div> </div> <script> let div = document.createElement('div'); div.id = 'myDiv'; div.className = 'box'; div.innerHTML = 'hello world'; let parent = document.querySelector('.parent'); parent.appendChild(div); </script> </body>
展示结果：
展示3
<body> <div class="parent"> <div class="aaa">卡布达</div> <div class="bbb">金龟次郎</div> <div class="ccc">呱呱蛙</div> </div> <script> let div = document.createElement('div'); div.id = 'myDiv'; div.className = 'box'; div.innerHTML = 'hello world'; let parent = document.querySelector('.parent'); parent.appendChild(div); let ccc = document.querySelector('.ccc'); //若对同一节点插入两次，则只有最后一次生效 parent.insertBefore(div, ccc); </script> </body>
展示结果：
注意：
① 插入节点的时候，一般先使用 CSS 中的类选择器，再转换成对象，最后对该对象进行操作。
② 若对同一节点插入两次，则只有最后一次生效。这其实很好理解，不管插入多少次，就代表其移动了多少次，只有最后一次才是 “目的地”。
展示4 删除节点
//parent 代表 节点 a 的父节点 //oldchild 接收返回值，表示刚刚被删除的 a节点 oldChild = parent.removeChild(a);
注意：被删除节点只是从 DOM 树中，被移除了，但仍然在内存中。之后可通过 oldChild 随时加入到 DOM 树的其他位置，只有当程序结束后，或走出某个作用域，才会被垃圾回收。在这一点上，和 Java 很相似。
<body> <div class="parent"> <div class="aaa">卡布达</div> <div class="bbb">金龟次郎</div> <div class="ccc">呱呱蛙</div> </div> <script> let parent = document.querySelector('.parent'); let bbb = document.querySelector('.bbb'); parent.removeChild(bbb); </script> </body>
展示结果：
