js中的dom操作

Dom

选择器

document.getElementById（id） 

通过id来获取html元素 单个

      document.getElementsByTageName（tag）

通过tag标签名来获取html元素（累数组 多个）

document.getElementsByName（class）

通过class类名来获取html元素（累数组 多个）

document.querySelectorAll（css选择器）

通过css选择器来获取html元素（累数组 多个）

document.querySelectorcss（css选择器）

通过css选择器来获取html元素（单个）
获取和改变层的内容
获取

    innerHTML     获取元素的内容   包括标签
    innerText        获取元素的内容  过滤标签

改变

    innerHTML设置元素的html内容 
    innerText设置元素的文本内容

定义：当浏览器去解析html标签完毕后会生成一个dom树形结构
会有三种类型节点：
元素类型
文本类型
属性类型
节点之间会用关系
父子
兄弟
附：操作html有三种方式
html方式
Dom 核心方式
xml方式

创建

   createElement（标签名）

添加

parent.append（被添加的元素）
parent.insertBefore(被提交的元素，在之前)

删除

parent.removeChild(被删除的元素)  getAttribute（属性名）
setAttribute（属性名，属性值）

节点关系

parentElement父元素节点
Children子节点
lastElementChild最后一个子节点
firstElementChild第一个子节点
nextElementSibling下一个兄弟子节点
previousElementSibling上一个兄弟子节点

节点类型

nodeType

节点的类型
3 文本节点
1 元素节点
节点的值

  nodeValue

节点的名称

  nodeName

table表格操作

table.insertRow(0)插入行
tr.insertCell（0）插入列
tr.rowIndex获取是第几行
table.deleteRow（index）删除行

间隔调用

    setInterval（fn，time）
    clearInterval()

延迟调用

     setTimeout（fn；time）
    clearTimeout()

事件

onclick
focus  获取焦点
blur  失去焦点
submite  提交