JS 4.17

JS

---

1.Web API

浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

2.DOM

文档对象模型（Document Object Model），处理HTML的标准编程接口

2.1DOM树

文档：document
元素：标签即元素element
节点：所有内容即节点node

2.2获取元素

• 根据ID获取：document.getElementById（id）id是大小写敏感的字符串，返回的是对象
  scipt写在标签的下面
  console.dir打印元素对象的更多属性和方法
• 根据标签名获取：document.getElementsByTagName（）里面是字符串，返回元素对象的几何，伪数组形式存储。若只有一个标签，返回的也是伪数组，没有标签返回空的伪数组。
  父元素必须为单个对象，不能是伪数组形式，可以设置为ul[0].getElementByTagName（）
• H5新增：document.getElementsByClassName（‘类名’）
  document.querySelector（’’）返回指定选择器的第一个元素对象，选择器加负号如.或#
  document.querySelectorAll（’’）返回指定选择器的所有元素对象
• 获取body和html： document.body
  document.documentElement

2.3事件

三部分：事件源、事件类型、事件处理程序

 <button id="btn">按我</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            alert('哈哈');
        }

常见鼠标事件

2.4操作元素

改变元素内容

element.innerText：从起始位置到终止位置的内容，不识别html标签，去除html、空格、换行
element.innerHTML：起始位置到终止位置的全部内容，识别html标签，包括html，保留空格和换行

修改元素属性

element.属性 = ；
表单修改：element.value（属性） = ；

修改元素样式（行内样式）

element.style.属性
element.className = ‘类名’ ------------会覆盖原先的类名 ，若要保留原来的类名，写上原来的类名 空格 + 新类名
display：none隐藏后不占位
display：hidden隐藏后占位

排他思想

1.先把所有按钮背景颜色去掉
2.然后再显示点击按钮的背景颜色