DOM基础

  1. JavaScript由ECMAScript+DOM+BOM组成的。
  2. DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写

    面试考题

    image.png

掌握基本的DOM查找方法

  1. document.getElementById() — 根据id获取唯一的一个元素
  2. image.png
  3. document.getElementsByTagName() — 返回所有的tag标签引用的集合 — 返回的是数组
  4. image.png

设置元素的样式（css）

  1. 语法：ele.style.stylName = styleValue
  2. 功能：设置元素的样式
  3. 说明：
    1. ele表示要设置样式的DOM对象
    2. styleName表示要设置的样式名称 — 使用驼峰命名方式 — fontSize
    3. styleValue — 要设置的样式的值

image.png

innerHTML

  1. 语法：ele.innerHTML
  2. 功能：返回ele元素开始和结束标签之间的HTML
  3. 语法：ele.innerHTML=“html”
  4. 功能：设置ele元素开始和结束之前的HTML内容为html

image.png

className

  1. 语法：ele.classname
  2. 功能：返回ele元素的class属性
  3. 语法：ele.classname = “cls”
  4. 功能：设置ele元素的class属性为cls
  5. image.png

如何设置DOM元素属性或添加属性

获取属性

  1. 语法：ele.getAttribute(“attribute “)
  2. 功能：获取ele元素的属性
  3. 说明;
    1. ele — 要操作的DOM对象
    2. attribute — 是要获取的html属性（id type class）

设置属性

  1. 语法：ele.setAttribute(“attribute”,value)
  2. 功能：在ele元素上设置属性
  3. 说明：
    1. ele — 要操作的dom对象
    2. attribute — 要设置的属性名称
    3. value — 要设置的attribute属性值

删除属性

  1. 语法：ele.removeAttribute（“attribute”）
  2. 功能：删除ele元素上的attribute属性
  3. 说明：
    1. ele — 要操作的对象
    2. attribute — 要删除的属性名称

JavaScript对表单元素进行设置

JavaScript对表单操作分为三种：初始化 赋值 取值

DOM查找方法 — 补充

  1. document.getElementsByName() — 返回所有的name属性引用的集合 — 返回的是数组
  2. document.getElementsByClassName() — 返回包含带有指定类名的所有元素的集合 — 返回的是数组