--- title: 03-DOM操作练习：基础练习 publish: true --- ## DOM操作练习 ### 举例1：点击按钮时，显示和隐藏盒子。代码实现： ```html

千古壹号

``` 代码解释：当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。另外，这里用到了`innerHTHL`属性，它可以修改按钮上显示的文字。代码最终显示的效果如下： 20180127_1518.gif ### 举例2：美女相册这里推荐一个网站： - 占位图片生成的在线网站：好处是：素材做出来之前，先留出空位，方便以后换图。比如这个链接可以生成400*300的占位图片。需求： - （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。 - （2）让p标签的innnerHTML属性值，变成a标签的title属性值。为了实现美女相册，代码如下： ```html

美女画廊

选择一个图片

``` 代码解释：（1）获取事件源：我们通过`ul.getElementsByTagName("a")`来获取ul里面的a元素。（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定（3）【重要】书写事件驱动程序：这里是用`img.src = this.href`，而不是用`img.src = aArr[i].href`。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。（4）代码的最后一行：`return false`表示：阻止继续执行下面的代码。实现的效果如下： 20180127_1630.gif 工程文件：[2018-01-27-美女相册demo.rar](https://github.com/qianguyihao/web-resource/blob/main/project/2018-01-27-%E7%BE%8E%E5%A5%B3%E7%9B%B8%E5%86%8Cdemo.rar) ### 举例3：鼠标悬停时，显示二维码大图 ```html

``` 实现效果： 20180127_1800.gif ## 表单元素的属性表单元素的属性包括：type、value、checked、selected、disabled等。 ### 举例1：禁用文本框/解禁文本框 ```html 账号:

密码: ``` 当文本框被禁用之后，文本框只读，不能编辑，光标点不进去。上方代码可以看到，**禁用文本框**的代码是： ```javascript inp.disabled = "no"; //让disabled属性出现，即可禁用 ``` 我们的目的时让`disabled`这个属性出现，即可禁用。所以，属性值里可以写数字，可以写任意一个字符串，但不能写0，不能写false，不能为空。一般我们写no。 **解禁文本框**的代码是： ```javascript inp.disabled = false; // 方法1：让disabled属性消失，即可解禁。 inp.removeAttribute("disabled"); //方法2：推荐 ``` 我们的目的是删除`disabled`属性，即可解禁。属性值可以是false，可以是0。但我们一般采用方式2进行解禁。实现效果： ### 举例2：文本框获取焦点/失去焦点细心的读者会发现，京东和淘宝的搜索框，获取焦点时，提示文字的体验是不同的。京东： 20180127_2000.gif 淘宝： 20180127_2005.gif 其实，**淘宝的提示文字，是用一个绝对定位的单独的标签来做的**。京东是判断输入框是否获取焦点；淘宝是判断输入框内是否有用户输入的文字。我们现在来实现一下。代码如下： ```html 京东:

淘宝: 电动牙刷

placeholder: ``` 实现效果如下： 20180127_2010.gif 如上方所示，我们还可以用placeholder来做，但是IE678并不支持，所以不建议使用。 ### 举例3：用户注册信息错误时，输入框失去焦点后，高亮显示。代码实现： ```html 账号：

密码： ``` 代码解释：这次我们是在标签内调用function的，此时是先通过window调用的function。所以行内调用的时候要带this。实现效果： 20180127_2035.gif ### 举例4：全选和反选对应的代码如下： ```html

	菜名	饭店
	菜品1	木屋烧烤
	菜品2	蒸菜馆
	菜品3	海底捞火锅
	菜品4	面点王

``` 注意代码中的注释，需求2是比较难的地方，这里用到了两次for循环。第一次for循环是因为，要给每个input都要进行绑定事件。实现的效果如下： 20180127_2320.gif ```javascript ```