DOM

浅谈DOM

DOM概念
DOM是一个文档对象模型,是一个编程接口。通过DOM接口改变网页的内容,结构和样式。

一个页面就是一个文档
页面里面所有的标签的叫做元素。页面所有内容都是节点。

DOM把以上内容都看作对象。

getElementByid(id) 返回匹配id的元素。id必须是一个字符串形势。返回的是一个元素对象。

console.dir 打印我们返回的元素对象,更好的查看厘米的属性和方法。

getElementsByTagName() 返回带有指定标签名的对象集合。以伪数组的形式存储的。采取遍历方式获得每一个元素的内容。

通过类名获取返回的元素 — getElementsByClassName() 伪数组形式存储。
H5新增的方法:querySelector 返回指定选择器的第一个元素对象。里面的选择器要加符号

querySelectorAll()返回指定选择器的所有元素对象。

获取body元素:— document.body;
获取html元素: — document.documentElement

事件基础:触发—响应机制;
事件有三部分组成 事件源 事件类型 事件处理程序
事件源 : 事件被触发的对象 谁
事件类型 : 如何触发 什么事件 比如点击事件
事件处理程序 : 通过一个函数赋值的方式 完成

执行事件的步骤:
1、获取事件源
2、注册事件(绑定事件)
3、添加事件处理程序

利用DOM改变元素里面的内容:
element.innerText:修改元素的内容,不识别html标签,会直接将标签显示,去除空格和换行
element.innerHTML:识别html标签,保留空格和换行
这两个属性是可读写的,可以获取元素里面的内容

表单属性:
onblur失去焦点 onfocus获取焦点
innerHTML是普通盒子的属性
表单里面的值是通过value来修改的。
this.disabled = true; 表示被禁用的意思。
this 指向的是事件函数的调用者

element.style.属性名 使用DOM更改操作元素的样式属性—属性采取驼峰命名法 — 修改的样式操作,产生的行内样式,比css权重要高

element.className 类名样式操作 当修改的样式较多,功能复杂时使用。会覆盖原来的类名
让我们当前元素的类名改为其他类 this.className = ‘类名’;不需要写 点 .

既保留原来的类,有加上新的类 :
this.className = ‘原类名 新类名’;

操作元素:
操作元素的内容:innerText innerHTML
操作常见元素属性:src href title alt
操作表单元素属性:type value disabled
操作元素样式属性:element.style className

循环排他思想算法:
1、先干掉其他人,所有元素全部清除样式
2、再设置自己,给当前元素设置样式

break 退出当前for循环,这样可以提高执行效率。

element.属性 获取属性值,获取内置的属性值,元素本身自带的。

element.getAttribute(‘属性’) 程序员自己添加的属性就属于自定义属性

设置属性值:
element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’,‘值’);

移除属性:
element.removeAttribute(‘属性’)

自定义属性目的:为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
H5规定自定义属性data-开头作为属性名并且赋值。

h5新增的获取自定义属性的方法
dataset是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset.index);
console.log(div.dataset[‘index’]);

获取元素的两种方式:
1、利用DOM提供的方法获取元素(逻辑性不强、繁琐)
2、利用节点层次关系获取元素(利用父子兄弟获取元素)

一个节点包含元素节点(1) 属性节点(2) 文本节点(3)

节点层级:
element.parentNode 得到的是离元素最近的父级节点(亲爸爸) 如果找不到指定的节点则返回为 null

element.childNodes 得到所有子节点 ,包含换行,空格这些元素节点和文本节点
element.childNode[index].nodeType 来分辨是什么类型的节点

如果只想要获得里面的元素节点,需要专门处理。

parentNode.children(非标准) 获取所有子元素节点,在实际开发中常用

parentNode.firstChild 返回第一个子节点,不管是什么类型的节点。
parentNode.lastChild 返回最后一个子节点

parentNode.firstElementChild 返回第一个子元素节点,找不到则返回null
parentNode.lastElementChild 返回最后一个子元素节点
但这两个方法有兼容问题,ie9+才支持

实际开发的写法
parentNode.children[0] 获取第一个子元素节点
parentNode.children[parentNode.children.length - 1] 获取最后一个子元素节点。

兄弟节点:
node.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
node.previousSibling 上一个兄弟节点 包含元素节点或者文本节点等等

node.nextElementSibling 下一个兄弟元素节点
node.previousElementSibling 上一个兄弟元素节点
但是有兼容性问题

创建节点
创建元素节点 — document.createElement(‘element’);
添加节点 — node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾,类似after伪元素 — node 父级 child 子级
appendChild 后面追加元素

node.insertBefore(child,指定元素) 指定放在哪个元素的前面

删除节点
node.removeChild(child) 从DOM中删除一个子节点,返回删除的节点
this.disabled = true; 代表禁用按钮
阻止链接的跳转 — javascript:;

复制节点(克隆节点):
node.cloneNode() 方法返回调用该方法的节点的一个副本。如果括号为空或者为false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
如果括号里面写true 则是深拷贝,复制标签并且复制里面的内容

for(var k in obj){
k得到的是属性名
obj[k] 得到是属性值
}

三种动态创建元素的区别:
1、document.write() 当文档流执行完毕,它会导致页面重绘
2、element.innerHTML 用拼接字符串的方式创建,比createElemnet慢一些 。 但是不要拼接字符串,采取数组形式拼接,创建多个元素效率更高,但结构稍微复杂一些。
3、document.createElement() 结构清晰

不同浏览器下,innerHTML(数组形式拼接)效率高于 createElement

arr.join(’’) 把数组转化为字符串

DOM重点核心:我们获取过来的DOM元素是一个对象object,所以称为文档对象模型

事件高级:

一、注册事件的两种方式
利用on开头的事件onclick 有唯一性,同一个元素同一个事件只能设置应该处理函数,后面的函数会覆盖前面的。

element.addEventListener(‘click’,function(){ });里面的事件类型是字符串,必定加引号,而且不带on ,并且同一个元素同一个事件可以添加多个监听器(事件处理程序) 。IE9之前不支持,可以使用attachEvent()代替。
不提倡使用attachEvent(),并且这个方法是IE9以前的浏览器才能使用的。
eventTarget.attachEvent(‘onclick’,callback);

二、删除事件两种方式(解绑事件)
1、传统方式:element.onclick = null; 解绑
2、新方式:
div[1].addEventListener(‘click’,fn) // 里面的fn 不需要加小括号
function fn(){ div[1].removeEventListener(‘click’,fn) };

ie8以前的浏览器:
divs[2].attachEvent(‘onclick’,fn1);
function fn1(){ divs[2].detachEvent(‘onclick’,fn1)}

三、DOM事件流的三阶段
事件传播的过程称为事件流
三阶段:1、捕获阶段 2、当前目标阶段 3、冒泡阶段
注意点:1、js的代码只能执行捕获或冒泡其中一个阶段 2、onclick 和attchEvent之类的传统事件只能得到冒泡事件 3、addEventListerer第三个参数为true则事件捕获阶段调用事件处理程序,如果false表示事件冒泡阶段调用事件处理程序。

实际开发我们更加关注事件冒泡。
有些事件是没有冒泡的,比如onblur , onfocus , onmouseenter , onmouseleave

四、事件对象
事件对象写到我们侦听函数的小括号里面,当形参来看。
事件对象只有有事件才会存在,它是系统自动创建,不需要我们传递参数。
事件对象 — 是我们事件的一系列相关数据的集合跟事件相关,比如鼠标点击里面包含鼠标的相关信息,鼠标坐标等。
事件对象我们可以自己命名
事件对象有兼容性问题 ie678通过window.event 获得
兼容写法 e = e || window.event
事件对象常用的方法和属性:
e.target —点击了哪个元素就返回那个元素—返回触发事件的对象(元素)this —哪个元素绑定了事件就返回哪个元素—返回注册或绑定事件的对象(元素) 兼容处理:— var target = e.target || e.srcElement;

e.type 返回事件类型 不带‘on’
阻止默认行为(事件):让链接不跳转,或者点击按钮不提交 方法 e.preventDefault(); //dom标准写法 在低版本中ie678 属性— e.returnValue;
我们可以利用return false 也能阻止默认行为,没有兼容问题–特点就是return后面的代码不执行了,并且限于传统的注册方法。

阻止事件冒泡:事件对象里面的e.stopPropagation() 方法
非标准写法: window.e.cancelBubble = true;

五、事件委托原理
原理:不是给每个子节点单独设置事件监听器,而且事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点

六、常用的鼠标和键盘事件
1、禁止鼠标右键菜单 contextmenu 主要控制何时显示上下文菜单 document.addEventLisenter(‘contextmenu’,function(){ e.preventDefault() })
2、禁止鼠标选中(selectstart 开始选中) document.addEventLisenter(‘selectstart’,function(){ e.preventDefault() })

鼠标事件对象MouseEvent
e.clientX 返回鼠标相对于浏览器窗口可视区的x坐标
e.clientY返回鼠标相对于浏览器窗口可视区的y坐标
e.pageX返回鼠标相对于文档页面的x坐标
e.pageY返回鼠标相对于文档页面的y坐标
e.screenX返回鼠标相对于电脑屏幕的X坐标
e.screenY返回鼠标相对于电脑屏幕的y坐标
鼠标移动事件:mousemove 只要鼠标移动1px就会触发这个事件 注意点: 千万不要忘记给left和top加上px单位
当元素设置为绝对定位之后它是不占任何位置的

键盘事件对象 KeyboardEvent:
onkeyup 某个键盘按键被松开时触发
onkeydown某个键盘按钮被按下时触发
onkeypress某个键盘按键被按下时触发 但是它不识别功能键比如ctrl shift箭头等
keydown比keypress先执行。keydown —> keypress —> keyup
如果使用addEventListener不需要加on

键盘事件对象 KeyboardEvent:
document.addEventListener(‘keyup’,function(e){console.log(e.keyCode)})
1、键盘对象中keycode属性可以得到相应键的ASCII码值
2、我们的keyup和keydown事件不区分字母大小写
3、我们的可以keypress事件区别字母大小写

element.focus(); js里面获得焦点的方法
注意:keydown和keypress文本框里面的特点:他们两个触发时马上就执行了里面的事件程序,这个时候文字还没来得及落入文本框中。
keyup事件触发时,文字已经落入文本框里面了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值