DOM

节点

• 元素子节点只检索第一层

• 子节点

  • 获元素的子节点数组oDiv.childNodes
  • 获元素的子元素节点数组oDiv.children
  • 第一个子节点firstChild
    * 兼容问题firstElementChild
  • 最后一个子节点lastChild
    * 兼容问题lastElementChild
  • 下一个兄弟节点nextSibling
    * 兼容问题nextElementSibling
  • 上一个兄弟节点previousSibling
    * *兼容问题 previousElementSibling
  • • 创建节点document.createElement()
  • 以创建 td 标签举例:
    1. 创建oTd=document.createElement('td');
    2. 移动节点 troTr.appendChild(oTd);

• 删除节点.removeChild() 点之前是要删除内容的父级,点之后是要删除的内容

• 父节点

  • 获元素的父节点数组oDiv.parentNode
  • 获取元素用来定位的父级offsetParent

• 节点类型nodeType
  * 文本节点 nodeType==3
  * 元素节点 nodeType==1

DOM 方式操作元素属性

• 设置节点oDiv.setAttribute('属性','值')
• 获取节点oDiv.getAttribute('名称')
• 删除节点removeAttribute(名称)

选择表格元素

• 选择 tbody.tBodies[]等价于.getElemensByTagName('tbody')
• 选择 tr.rows[]等价于.getElementsTagName('tr')
• 选择 td.cells[]等价于.getElementsTagName('td')
• 选择表头.tHead[]
• 选择表尾tFoot[]

• 点击事件onclick

• 弹窗提示alert()

• 鼠标移入onmouseover

• 鼠标移出onmouseout

• 通过 id 引用document.getElementById()

  • document：当前页面，也可以使用其他目录

• 通过 标签名 引用document.getElementsByTagName()、

  • 一般引用时需要带数组位aDiv[0].style.width:100px;

• 预加载页面后执行 jswindow.onload=function(){}

• 使用 html 标签的输入框innerHTML

• 可变参、不定参arguments

• 非行间样式currentStyle例oDiv.currentStyle.width
  * 另一种方式（根据兼容性）getComputedStyle(oDiv,无用参数2).width

• 定时器
  * 在指定时间间隔内重复执行setInterval(运行内容,时间间隔)运行内容最好是函数,例setInterval(function(),1000)时间单位 ms
  * 指定时间之后执行，且只执行一次setTimeout(运行内容,时间)

• 关闭定时器
  * clearInterval()括号内为定时器的返回值
  * clearTimeout()

• 获取元素的左边距(考虑所有影响因素)this.offsetLeft

• 获取元素的上边距offsetTop

• 获取元素的宽度offsetWidth

• 获取元素的高度offsetHeight

• 事件用户的操作

• 为链接添加JS<a href="javascript:;"></a>

• 中断break整个循环中断

• 跳过continue本次循环中断

• while 循环

while(Boolean)
{
        ...
}

• for循环（可以用来遍历数组）

while(var i=0; Boolean;   i++)
{
        ...
}

• for..in 循环(可以用来遍历 json)

for(var i in json)
{
        ...
}

• 检查变量类型typeof a；

• 未定义 undefined

• 数字number
  * 非数字NaN（Not a Number）
  * NaN≠NaN
  * isNaN(a)判断一个内容是否为 NaN
  * 向上取整 Math.ceil()
  * 向下取整Math.floor()

• 字符串string
  * 字符串读取第 n 位字符arr.charAt()

• 布尔boolean
  * 真true、非0数字、非空字符串、非空对象
  * 假false、数字0、空字符串、空对象、undefined

• 函数function

• 对象object

• 数组
  * 在结尾添加push()
  * 删除结尾pop()
  * 头部添加unshift()
  * 删除头部shift()
  * 在中间添加删除splice()
  * 删除arr.splice(起点,长度)
  * 添加arr.splice(起点,0,'元素1','元素2','元素n')
  * 数组连接a.concat(b)
  * 用分隔符连接a.join('分隔符')
  * 数组排序a.sort()（字符串类型）
  * a.sort(a,b){a-b}

• 日期对象var oDate=new Date();
  * 获取年oDate.getFullYear()
  * 获取月oDate.getMonth()+1(会比实际月份小1)
  * 获取日oDate.getDate()
  * 获取星期oDate.getDay()(0代表周日)
  * 获取时oDate.getHours()
  * 获取分oDate.getMinutes()
  * 获取秒oDate.getSeconds()
  * * 定时器
  * 在指定时间间隔内重复执行setInterval(运行内容,时间间隔)运行内容最好是函数,例setInterval(function(),1000)时间单位 ms
  * 指定时间之后执行，且只执行一次setTimeout(运行内容,时间)
  * 关闭定时器
  * clearInterval()括号内为定时器的返回值
  * clearTimeout()

• 将字符串转换为数字（整数）parseInt()

• 将字符串转换为数字（小数）parseInt()

• 将字符串转换为小写形式.toLowerCase()

• 在字符串中搜索文本出现的位置.search()无结果时返回-1;

• 通过关键字分割字符串.split('')

• style 加样式只能加在行间

• style 读取样式也只能在行间

• 样式优先级：*<标签<class<ID<行间

• 对于同一个元素，操作样式保持一直用行间或 class

• 行为(js)、样式(css)、结构(html)三者分离

• ECMAScript 编译器，解释器（几乎没有兼容性问题）

• DOM:Document Object Model操作 HTML 的能力（例：document）（有一些操作不兼容）

• BOM：Browser Object Model操作浏览器的能力（例：window）没有兼容问题（完全不兼容）

• 类型前缀
  [image:B6DE3359-EBCF-4024-B9C8-8F407D74DCE5-304-000028A8B6E6BC37/35D8A15A-DA8F-4FDB-88B0-5D1C349CF9B4.png]