【12-13】DOM的操作

一、控件获取及设置

1、针对非表单控件：

  1-1支持标签且可以解析标签

      oDiv.innerHTML  ===>获取内容

      oDiv.innerHTML = " " ;  ===>设置内容

  1-2不支持标签，可以解析标签

      oDiv.innerText  ===>获取内容

      oDiv.innerText = " " ;  ===>设置内容

2、针对表单控件：

oInput.value  ===>获取内容

oInput.value = " " ;  ===>设置内容

---

二、innerHTML案例——内容渲染

 

---

三、自定义属性

【属性分为自定义属性和固有属性】

  1、自定义属性：

      1-1概念：定义的可以是自己命名的 xx=y，也可以是与生具来的 src，type，href。。。

      1-2设置自定义属性：oDiv.setAttribute('xx','yy')   ===>即自定义属性'xx'的属性值为'yy'

      1-3设置获取自定义属性：oDiv.getAttribute('xx')   ===>即获取自定义属性'xx'

      1-4设置删除自定义属性：oDiv.removeAttribute('xx')   ===>即删除自定义属性'xx'

自定义属性案例： 

 

点击之前

点击"教育"之后

 

点击"体育"之后

 

点击"娱乐"之后

 

 

---

四、固有属性

如：src、type、href、checked。。。

  1、获取和设置固有属性

      oImg.src    ===>获取固有属性

      oImg.src = '路径'   ===> 设置固有属性

      oInput.checked   ===>获取固有属性

      oInput.checked = true / false   ===>设置固有属性

控制复选框的选中  oInput.checked = true

控制复选框的取消  oInput.checked = false

点击全选之前

 

点击全选之后

 

 

---

五、开关灯例题

点击开灯之前

 

点击开灯之后

 

 

---

五、网页换肤例题

点击图片之前

 

点击第一张图片将背景图换为第一张图

 

  点击第二张图片将背景图换为第二张图

  

点击第二张图片将背景图换为第二张图