document.getElementByClassName(“c1”);

document.getElementsByName();

document.getElementById();

操作元素内容，

• innerHTML: 用来读取设置元素节点的内容，可以识别标签语法
• innetText: 不能识别标签语法
• value：读取或者设置表单中的值

操作元素属性，

1. 直接操作对象
   1. 简化，定义一个方法:$
   2. 直接赋值 id=“id” className=”“”; （class需要更名）
   3. 移除属性：赋空值“”,null(会显示出来，remove置空，看不见)
2. 元素对象提供相关方法操作标签（class不需要更名）
   1. setAttribute(“attrName”,”value”)
   2. getAttribute(“attrName”)
   3. removeAttribute(“attrName”);

操作元素样式

1. 通过操作id和class属性，对应选择器的样式
2. 操作行内样式，操作style属性（动态操作常用）
   1. 字符串格式（和标签中写法一样）覆盖了css样式表中属性 style = “width:200px”;
   2. 对象格式 p.style.width = 200px;
   3. 所有出现连接符的属性都由-改为了驼峰,编程语言中（-是运算符号）

      font-size == fontSize()

元素节点的层次属性

1. 获取父元素

   • parentNode()

2. 获取子元素列表

   1. 属性值、

      • nodeName,nodeValue
      • nodeType:1：标签元素，2：属性，3：文字
      • childNodes 可以拿到标签内的文本节点，元素
      • children 常用，获取子元素，不包含文本节点

3. 获取下一个兄弟节点

   • nextSibling（带文字节点）
   • nextElementSibling

4. 获取上一个兄弟节点

   1. previousSibling（带文字节点）
   2. previousElementSibling

5. 获取节点属性

   1. attributes 获取属性节点列表

节点的创建，添加，删除

1. 创建节点

   1. createElement(“h1”); 返回创建好的元素节点

2. 节点添加

   1. 节点的添加删除只能父元素操作
   2. 添加在父元素的末尾parentNode.appendChild(element)
   3. 指定位置添加parentNode.insertBefore(new,old)在已有位置插入新节点
   4. body作为document的属性存在，可以直接访问
   5. 一个节点，对应一个标签，多个标签，需要创建多个节点
   6. 文本节点：createTextNode()也是一个节点，需要追加到一个父节点之后，比如H1,H2

3. 节点删除

   1. removeChild() 节点名称

DOM事件处理

• DOM事件介绍：

  • DOM事件：

    • 指的是用户的行为或元素的状态

  • DOM事件处理：

    • 元素去监听事件，事件发生后进行处理

  • 常用事件分类(on开始，全部都是小写)

    • 鼠标事件

      • onclick
      • ondblclick
      • onmouseover(鼠标移入)
      • onmouseout(鼠标移出)
      • oumousemove(鼠标移动)

    • 键盘事件

      • onkeydown 按下
      • onkeyup 抬起
      • onkeypress 字符按键被按下（fn shift 等不包括）

    • 文档，窗口或元素加载完毕

      • onload()
  • 事件绑定方式
  • 内联绑定：在元素上写明
  • 动态绑定：取到元素，动态添加