DOM随笔记

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  去空格 :属于字符串的方法  把字符串两边的空格清空  如果都是空格就清空整个字符串