web API查询元素/事件/操作元素对象的属性/常用元素的操作方法

查询元素

• id： document .getElementByld （id名称)；
• 标签： document . getElementByTagName （标签名）；
• 类名：document.getElementsByClassName（类名）；
• name属性: document.getElementsByName（）；
• 选择器：document.querySelector（选择器）获取的是一个对象；
  document.querySelectorAll（）获取的是对象的集合；

事件

事件三要素

• 事件源 ：触发事件的元素对象 ；
• 事件类型 ：要触发的是什么事件；
• 事件处理函数 ：触发了事件你要干嘛；

事件类型

• click ：点击事件；
• focus ：焦点事件；
• blur ：失去焦点事件；
• input ：表单类容发生改变的事件；
• mouseover ：鼠标移入事件；
• mouseout ：鼠标移出事件；

操作元素对象的属性

一、非表单元素(以div举例)

• div.innerText = ’ '----------设置标签中的文本内容；
• div.innerHTML = ’ '----------设置标签中的内容；
• div.src = ’ '----------设置图片路径；
• div.title = ’ '----------设置标题 鼠标悬停在图片上显示的提示文本；
• div.href = ’ '----------修改a标签的href属性；

二、表单元素

• input.value = ’ '----------设置表单内容；
• input.type = ’ '----------修改表单类型；
• input.disabled =true----------是否禁用；
• input.checked = true----------是否选中；

三、样式的操作

• style属性去设置： elenment.style . 属性名 = ’ ’ 这里的属性名是驼峰命名法；
• 设置类名：element.className = ’ ’ 会覆盖原来的内容 ；

常用元素的操作方法

creatElement();

appendChild();