js随手笔记

1.获取页面元素可以使用以下几种方式:

根据ID获取:

使用getElementById()方法可以获取带有Id的元素对象

根据标签名获取:

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合

通过HTML5新增的方法获取:

1.document.getElementsByClassName('类名'):根据类名获取某些元素集合

2.document.querySelector('选择器'):返回指定选择器的第一个元素对象

3.ocument.querySelectorAll('选择器'):根据指定选择器返回

特殊元素获取

1.获取body元素:

document.body

2.获取html元素:

document.documentElement

2.事件基础:

1.事件是由三部分组成 事件源  事件类型  事件处理程序

(1)数据源:事件被触发的对象

(2)事件类型:如何触发  什么事件  比如鼠标点击  还是鼠标经过  还是键盘按下

(3)事件处理程序:通过一个函数赋值的方式

常见的鼠标事件

节点操作:

为什么要学节点:

获取元素通常使用两种方式:

1.利用DOM提供的方法获取元素

document.getElementById()

document.getElementByTagname()

document.querySelector()等

逻辑性不强、繁琐

2.利用节点层级关系获取元素

利用父子兄弟关系获取元素。逻辑性强,兼容性差

节点概述:

网页中所有内容都是节点(标签、属性、文本、注释等jie),在DOM中,节点使用node来表示

一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

元素节点nodeType为1

属性节点nodeType为2

文本节点nodeType为3(文本节点包含文字、空格、换行等)

父级节点

node.parentNode

子节点

parentNode.childNodes:所有的子节点包含元素节点文本节点等

如果只想获得里面的元素节点,则需要专门处理。一般不提倡使用

parentNode.children:返回所有子元素节点。只返回子元素节点

获取第一个和最后一个子节点

parentNode.firstChild:获取元素的第一个子节点,不管是文本节点还是元素节点

parentNode.lastChild:获取元素的最后一个子节点,不管是文本节点还是元素节点

parentNode.firstElementChild:返回第一个子元素节点,找不到则返回null

parentNode.lastElementChild:返回最后一个子元素节点,找不到则返回null

但是这两个有兼容性问题,仅支持ie9以上使用

实际开发中我们使用

兄弟节点

获取下一个兄弟节点

nextSibling:包含元素节点 文本节点等

nextElementSibling:得到下一个兄弟元素节点,兼容性差仅支持ie9以上

获取上一个兄弟节点

previousibling:包含元素节点 文本节点等

previousElementSibling:得到上一个兄弟元素节点,兼容性差仅支持ie9以上

创建节点

document.createElement('元素')

添加节点

node.appendChild(child):将一个节点添加到指定父节点的子节点列表末尾

node.insertbefore(child,指定元素)将一个节点添加到父节点的指定子节点前面

删除节点

node.removeChild(child)

你可能感兴趣的:(js随手笔记)