6.1 JavaScript的组成

完整的JavaScript是由ECMAScript(语法)、Browser Object(DOM、BOM)(特性)组成的

6.2 DOM查找方法

document.getElementById()获取id的值

语法：document.getElementById("id")

功能：返回对指定拥有ID的第一个对象的引用（两个相同id返回第一个）

返回值：DOM对象

说明：id为DOM元素上id属性的值，得不到为null

在document.getElementById()函数内，id要加前后引号

document.getElementsByTagName()

语法：document.getElementsByTagName("tag")

功能：返回一个对所有tag标签引用的集合

返回值：数组

说明：tag为要获取的标签名称

• 第一种是在全局body中查找'li'标签集合
• 第二种通过<ul>的id查找内部的‘li’标签集合
• 第三种通过先在全局找单个‘list1’标签，然后然后作为id查找查找其内部的‘li’标签集合

  

6.3 动态给元素添加样式

ele.style.styleName=styleValue 动态设置CSS样式

语法：元素名.style.属性名=属性值

功能：设置ele元素的CSS样式

说明：

1. ele为要设置样式的DOM对象
2. styleName为要设置的样式名称 （不能使用“-”连字符形式font-size，使用驼峰命名形式fontSize）
3. styleValue为要设置的样式值

给box.style.color设置"red"动态设置样式（记得加引号），font-weight属性名使用驼峰写法fontWeight

动态设置背景颜色

先将list所有li放入数组，然后通过for循环遍历分别给元素的backgroundColor属性赋值

6.4 获取HTML属性

innerHTML 获取标签内文本

语法：ele.innerHTML

功能：返回标签之间的文本和HTML内容

语法：ele.innerHTML="html"

功能：设置ele元素开始和结束标签内的HTML内容为html

for循环获取标签内文本值，可以使用赋值语句给标签内文本加内容

className的获取和设置

语法：ele.className

功能:获取ele元素的class属性

语法：ele.className=“cls”

功能：给元素添加属性cls

这里给list1的class赋值为cu，替换掉元素本身的class（"asd"）

6.5 获取、设置、删除属性

ele.getAttribute("attribute")获取属性

语法：ele.getAttribute("属性名")

功能：获取ele元素的attribute属性

说明：

1. ele是要操作的DOM对象
2. attribute是要获取的html属性

首先取出p属性，align属于自带属性，可以直接使用“ . ”获取，如果是自己设置的属性就用getAttribute获取。class属性使用“classname”获得

ele.setAttribute("attribute",value) 设置属性

语法：ele.setAttribute("属性名",属性值)

功能：在ele元素上设置属性

说明：

1. ele是要操作的DOM对象
2. attribute是要设置的属性名
3. value是要设置的attribute属性值

在p标签内设置了data-color属性

ele.removeAttribute("attribute") 删除属性

语法：ele.removeAttribute("属性名")

功能：删除ele上的attribute属性

说明：

1. ele是要操作的DOM对象
2. attribute是要删除的属性名称