DOM对象
WebAPI:浏览器提供的 一套通过JS语法操作 浏览器和 页面元素的方法 BOM 和DOM
DOM:操作页面和HTmL元素与属性
BOM操作浏览器窗口和相关属性
DOM对象和DOM树
浏览器生成界面时 1,会先根据html标签生成dom对象,并根据html的嵌套结构,将dom对象生成一颗树形结构 2.根据dom书中的内容 绘制出界面给用户看
获取DOM对象:dom对象存放在dom树中.dom树属于document对象,查找dom对象,都需要调用document中的方法
ById 找到了就返回dom对象,找不到就返回null
ByTagName( 标签名)_ 找到了返回类数组 找不到返回空数组
ByClassName 根据class类名查找dom对象
ByName 根据name属性
通过query系列查询
document.querySelector(选择器) 查询第一个dom对象,找到了就返回dom对象,找不到返回null
1\通过id选择器 ( '#id名' )
2\类选择器 ( ' . 类名 ' )
3\标签选择器 ( ' 标签名' )
querySelector 通过 id 类名 标签名查
【 document.querySelectorAll(选择器) 】 查询所有dom对象,找到了就返回dom对象的一个类数组,找不到 就返回空数组
新增: 根据属性选择器查找dom对象,属性选择器的属性可以时 HTML标准属性名 也可以时自定义属性名
图例,语法格式
子代选择器 查找
get方法: 通过id名,name属性,标签名,类名
DOM对象属性的相关操作
普通dom对象的属性
行内样式表属性 dom.style
dom.className = ' ' 修改标签中的class类名
dom.innerText innerHTML 设置的时双标签的内容
src
href.
表单dom对象的属性
value
diaabled 表单禁用
selected
DOM事件
三要素: 事件源 操作谁 事件类型 什么时候操作 事件处理函数 做什么
流程 : 获取事件源 注册事件 编写事件处理函数
onclick onmouseover onmouseout onfucus 获取焦点 onblur 失去焦点
trim 去空格 :属于字符串的方法 把字符串两边的空格清空 如果都是空格就清空整个字符串
