一、DOM节点操作(上)
1. 常用节点获取方法：
2. 获取元素节点信息常用属性：
3. 常用的节点属性获取方式：
（1）获取id名为container的div元素，请补全横线处代码。
document.________('div#container')
答案：querySelector
“div#container”属于CSS选择器字符串，且id名不可重复，选择的只能是一个元素，所以需要获取指定选择器或选择器组匹配的第一个节点。
（2）获取ul中的第2个li元素，请补全横线处数字。
document.querySelectorAll('ul li')[________]
答案：1
querySelectorAll方法获取结果为节点集合，集合索引从0开始，依次增加。
（3）获取最外层div元素，请补全横线处代码。
<div> <p><span></span></p> </div> <script> document.querySelector('span').________.parentNode </script>
答案：parentNode
观察元素结构可知，div元素为span元素的父级的父级，使用parentNode即可返回指定节点的父节点，父级的父级即为 .parentNode.parentNode
（4）获取div内所有p元素和span元素，请补全横线处代码。
<div> <p></p> <p></p> <span></span> <span></span> </div> <script> document.querySelector('div').________ </script>
答案：children
观察元素结构可知，p元素和span元素皆为div元素的子元素，这里需要使用获取选定元素所有子元素的属性。
（5）代码如下，需要判断input输入框是否为密码类型，请补全横线处代码。
<input type="password" placeholder="输入密码"> <script> var inputType = document.querySelector('input').________ if (inputType === "password") { // 判断密码 } </script>
答案：getAttribute('type')
需要判断输入框的类型，即判断input元素的type属性值，获取元素属性值可通过属性名或使用getAttribute方法获取。
二、DOM节点操作(下)
1. DOM 修改：
2. DOM 添加：
3. DOM 删除：
（1）删除类名为disable的元素，补全横线处代码。
var disbaleItem = document.querySelector('.disable') disbaleItem.parentNode.________(disbaleItem)
答案：removeChild
此处为节点删除操作，但要注意已经使用parentNode指定了父节点，所以不可使用remove。
（2）在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）
<ul> <input type="text" value="任务3" /> <li class="item">任务1</li> <li class="item">任务2</li> </ul> <script> var ul = document.querySelector ('ul') var val = document.querySelector('input').value var lastItem = document.________('li') lastItem.innerHTML = val ul.________(lastItem) </script>
答案：createElement，appendChild
添加的为一个新li元素，所以需要创建元素，第一空应使用节点创建方法createElement，
由于需要在ul的最后一个元素后插入，参数只有一个lastItem代表元素节点，最后一空应为符合要求的节点添加方法。
（3）将内容为第一名的元素插入到ol元素内的第一行，请补全横线处代码。
<ol> <li>第二名</li> <li>第三名</li> </ol> <script> var ol = document.querySelector('ol') ol.insertAdjacentHTML('________', '<li>第一名</li>') </script>
答案：afterbegin
insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内第一行，也就是元素内部的第一个子节点之前，这里应使用对应的位置参数。
（4）将不属于国内的城市删除，请选择正确的选项。
<ul> <li>石家庄</li> <li>秦皇岛</li> <li>伊拉克</li> <li>哈尔滨</li> </ul> <script> var item = document.querySelectorAll('li')[________] item.remove() </script>
答案：2
remove()方法可删除选定元素，这里的item指的是被删除的li元素，由题知，这里要删除不属于国内的元素即伊拉克，所以要填写对应的数字索引。
三、DOM 控制 CSS 样式
1. 通过style属性控制样式：
语法：element.style.property = value
property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。
2. 通过classList控制样式：
（1）将div元素背景颜色设置为蓝色，请补全横线处代码。
var box = document.querySelector('div') box.style.________ = 'blue'
答案：backgroundColor
原背景颜色属性名为background-color，使用style属性更改样式时，如果原CSS属性包含“-”，则需转换命名形式，此处应为修改命名形式后的背景颜色属性名。
（2）将div设置为隐藏，请补全横线处代码。
<style> .hidden { display: none; } </style> <div class="box">看不见我</div> <script> var box = document.querySelector('.box') box.classList.________('hidden') </script>
答案：add
div 的类名为 hidden，使用 add 添加类名。
（3）将包含disabled类名的按钮设置为禁用，请补全横线处代码.
<button class="delete disabled">删除</button> <script> var delBtn = document.querySelector('.delete') if (delBtn.classList.________ ('disabled')) { delBtn.setAttribute('disabled', true) } </script>
答案：contains
该题用到了 if 语句，需要判断 button 元素中是否包含 disabled类名，此处应使用classList中的 contains对应的判断类名是否存在。
（4）将span元素文字颜色设置为绿色，请补全横线处代码。
<style> .pass { color: green; } .loading { color: orange; } </style> <span class="pass loading">考试通过</span> <script> var item = document.querySelector('span') item.classList.remove('________') </script>
答案：loading
pass类名代表绿色，loading类名代表橘色，如果要使用绿色，就得删除类名 loading。使用classList中的remove方法。
（5）span元素的文字颜色是红色。
<style> .active { color: red; } </style> <span>逢考必过</span> <script> var item = document.querySelector('span') item.style.color = 'blue' item.classList.add('active') </script>
答案：错误
对于更改同一个元素的同一种样式，style属性的优先级要高于classList。
四、节点写入
1. 节点写入常用方式：
（1）在div中插入文字内容为“加油，我要通过C认证”的p元素，请补全横线处代码。
<div></div> <script> var box = document.querySelector('div') box.________ = '<p>加油，我要通过C认证</p>' </script>
答案：innerHTML
此处需要插入一个p元素，插入的值为字符串，所以需要使用可以解析html字符串的DOM属性，返回元素中的html内容。
（2）使如下代码运行后输出字符串sky，请补全横线处代码。
<div> <span>s</span><span>k</span><span>y</span> </div> <script> var word = document.querySelector('div').________ console.log(word) </script>
答案：innerText
sky分别对应div内三个span元素中的文本，所以这里只需要获取到元素文本内容，需要使用只获取文本内容的DOM属性innerText。
（3）在第一行元素后插入第二行元素，请补全横线处代码。
<div>第一行</div> <script> document.________ ('<div>第二行</div>') </script>
答案：write
此处需要在div后添加一个元素，应使用对应的节点写入方法，将html字符串解析为html元素并写入到html文档中。
（4）将ul中的span元素改为li元素，文字内容不变，请补全横线处代码。
<ul> <span>第一梯队</span> <li>第二梯队</li> </ul> <script> var box = document.querySelector('ul span') box.innerHTML = '________' </script> 答案：<li>第一梯队</li>
此处需要将span元素替换为li元素，需要使用到innerHTML，对应的值只需要把html字符串中span改为li即可。
（5）代码运行后，页面中所有数字之和是________。
<ul> <script> document.write('<li>5</li>') </script> <li>6</li> <script> var box = document.querySelector('ul') box.innerHTML = '<li>7</li>' </script> </ul>
答案：7
代码最后使用了innerHTML，将ul中的所有内容全部替换成了对应的html字符串，页面中只会显示一个数字。
