DOM、BOM文档对象模型

DOM

获取元素

获取元素的方法有的是获取单个元素，有的是获取一组元素。一组元素要显示一个元素加下标就行，显示所有就循环遍历

• document.getElementById(‘id值’) 单个元素
• document.getElementsByTagName(‘标签名’) 一组元素
• document.getElementsByClassName(‘标签名’); 一组元素
• document.querySelector(‘选择器’) 单个元素
• document.querySelectorAll(‘选择器’) 一组元素

事件

事件3要素：1、事件源（被触发的元素）2、事件类型（onclick、onmouseenter、onmouseleave、oninput…）3、事件处理程序

DOM0级事件处理

1、在标签内写onclick事件 2、在JS写DOM元素.onlicke=function（）{} 注意：事件处理程序中的this指向事件源 移除：元素.事件类型=null；

DOM2级事件处理

两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()
第一个参数是事件名（如click）；第二个参数是事件处理程序函数；第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用;

事件对象

事件对象：事件触发后保存一些事件相关信息的对象;事件源.事件类型 = function(e){ // 第一个形参e就是事件对象 }
鼠标事件对象相关属性 :
1、 事件对象.clientX / 事件对象.clientY 参照是==》浏览器
2、事件对象.pageX / 事件对象.pageY 参照是==》文档
3、 事件对象.offsetX / 事件对象.offsetY 参照是==》当前的元素
键盘事件对象相关属性：
1、事件对象.keyCode ===》 获取键盘按键对应的键码值
2、事件对象.altKey ===》 表示alt键是否按下，返回布尔值。
3、事件对象.shiftKey ===》 表示shift键是否按下，返回布尔值。
4、事件对象.ctrlKey ===》 表示ctrl键是否按下，返回布尔值。true（按下），false(没有按下)
事件对象的公共属性和方法
1、事件对象.target 获取最先触发的元素 e.target 代表不一定是事件源，代表的是最先触发的元素【目标阶段→ document】
2、 事件对象.preventDefault(); 阻止默认行为
3、事件对象.stopPropagation(); 停止冒泡传播

操作元素

操作属性

获取：元素.属性名 设置：元素.属性名 = xxx
class属性操作不了，只能操作calssName;innerText，只识别文本；innerHTML，文本与标签；textContent，只能识别文本；

操作样式

1、通过style属性设置样式 (元素.style.样式属性名 = ‘样式属性值’)
2、通过className设置样式 （元素.className = ‘类名’）

排他思想

先设置全部隐藏，然后设置对应的显示

操作表单元素的属性

1、value 操作表单元素的内容 (获取：元素.value;设置：元素.value = 值)
2、disabled 操作表单元素是否禁用 （ 获取：元素.disabled;（true→禁用，false→不禁用）设置：元素.disabled = 布尔值）
3、checked 操作表单元素是否选中 （获取：元素.checked;（true→选中，false→不选中）设置：元素.checked = 布尔值）
4、4.selected 操作表单元素的是否选中（获取：元素.selected;（true选择 false 不选择）设置：==元素.selected = 布尔值）

自定义属性

1、元素.属性名=值 2、获取（元素.getAttribute(name);） 设置（元素.setAttribute(name,value);）
移除（元素.removeAttribute(name,value);）3、直接在标签上自定义添加的。这种不可以使用元素 . 点 来获取

节点层次（根据节点关系获取元素）

1、根据子节点获取父节点（子节点.parentNode ）
2、根据父节点获取子节点（ - 父节点.childNodes; 获取的子节点包含文本（空格换行也是文本）和元素（不推荐使用）- 父元素.children - 父节点.firstElementChild; - 父节点.lastElementChild; 注意：加Element表示找元素节点，不加就是找节点）
3、获取兄弟节点 （节点.nextElementSibling 节点.previousElementSibling）
节点的nodeType属性的作用（节点类型）：元素→ 1； 文本→3 ；
节点的nodeName属性的作用（节点名）：元素→ 大写的标签名 文本→ #text
节点的nodeValue属性的作用（节点值）：元素→ null 文本→ 文本的内容

动态创建元素

1、通过innerHTML创建元素 ：// 获取元素中原有的内容（var str = ul.innerHTML;）// 添加内容（ul.innerHTML =str + ‘

• 我是新来的
• ’;）（执行多个速度慢，不推荐使用）
  2、通过document.createElement创建元素 （要结合动态追加使用）// 创建一个新的元素（var newLi = document.createElement(‘li’);）// 追加到要追加的元素中（ul.appendChild(newLi);）// 设置元素的内容（newLi.innerText = ‘我是新来的’;）

动态追加元素（结合创建元素使用）

父元素.appendChild(子元素);

动态删除元素（必须父元素调用）

父元素.removeChild(子元素);

替换元素

父节点.replaceChild(新的节点,旧的子节点)

插入元素

父节点.insertBefore(新的节点,旧的子节点)

克隆元素

• 元素.cloneNode(true或false); 返回一份新的克隆后的元素
  true------》克隆元素和内部容
  false-----》默认，只克隆元素（标签）

BOM