JavaScript(WebAPI)

WebAPI 包含了 DOM + BOM. 

DOM API: 操作页面结构

BOM API: 操作浏览器

DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树. 

获取元素

querySelector

1、 表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素Element对象. 

2、如果您需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll()

  例如 .box 是类选择器, #star 是 id 选择器 等. 

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>  
    var elem1 = document.querySelector('.box'); 
    console.log(elem1);
    var elem2 = document.querySelector('#id'); 
    console.log(elem2);  
    var elem3 = document.querySelector('h3 span input');  
    console.log(elem3);
</script>
<div class="box">abc</div>
<div id="id">def</div><script>  
   var elems = document.querySelectorAll('div');
   console.log(elems);
</script>

querySelectorAll

使用 querySelectorAll 用法和上面类似. 

事件驱动

明确发生某件特殊含义行为时，执行某个动作

事件：点击（click)、鼠标滑过（hover)

事件源：按钮（button)

当：on

<button id="btn">点我一下</button>
<script>  
   var btn = document.getElementById('btn'); 
   btn.onclick = function () {
        alert("hello world");   }
</script>

btn 按钮就是事件源.

点击就是事件类型

function 这个匿名函数就是事件处理程序

其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

获取/修改元素内容

1. innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

不识别 html 标签. 是非标准的(IE发起的). 读取结果不保留html源码中的 换行 和 空格. 

<div>  
   <span>hello world</span> 
   <span>hello world</span>
</div>
<script>  
  var div = document.querySelector('div'); 
   // 读取 div 内部内容   
 console.log(div.innerText); 
   // 修改 div 内部内容, 界面上就会同步修改
 div.innerText = 'hello js <span>hello js</span>';
</script>

 通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容. 修改页面的时候也会把 span 标签当成文本进行设置.

2. innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代.

识别 html 标签. W3C 标准的. 读取结果保留html源码中的 换行 和 空格. 

<div>  
  <span>hello world</span> 
   <span>hello world</span>
</div>
<script> 
   var div = document.querySelector('div'); 
   // 读取页面内容  
  console.log(div.innerHTML);  
  // 修改页面内容  
  div.innerHTML = '<span>hello js</span>'
</script>

innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行.

获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

value: input 的值.

disabled: 禁用

checked: 复选框会使用

selected: 下拉框会使用

type: input 的类型(文本, 密码, 按钮, 文件等)