JS-DOM 总结性知识

• 文档对象模型(Document Object Model):w3c组织推荐的处理可扩展标记语言(html/xml)的标准编程接口，通过这些接口改变网页的内容、结构和样式。
• DOM使html形成一棵dom树，包含文档、元素、节点。
• 获取得到的DOM元素是对象。

DOM操作针对元素节点进行操作，主要有：创建、增、删、改、查、属性操作、事件操作。

一、创建

1. document.write('<div>123</div>');
2. var li=document.creatElenent('li');
3. node.innerHTML='<a href="#">123</a>';

document.write ('');	node.creatElement('');	node.innerHTML='';
(‘’) 方式赋值	(‘’) 方式赋值	=’‘ 方式赋值
写具体的标签	括号里写标签名	写具体的标签
返回undefined	返回赋的值	返回赋的值
直接创建+添加	由document创建，再由节点添加	直接创建+添加
如果页面文档流加载完毕，会导致页面重绘		也可以用来修改元素内容 不能直接在document上创建

二、增

1. 在ul后边增加元素liul.appendChild(li);
2. 在ul的第1个元素后边增加元素liul.insertBefore(li,ul.children[0]);

node.appendChild(child);	node.insertBefore(child,指定位置);
括号里没有引号	括号里没有引号
类似于数组的.push()操作

三、删

1.ul.removeChild(li);父子关系要明确！！！

四、改

1.改变元素内容

(1) div.innerText='<p>123</p>';
(2) div.innerHTML='<p>123</p>';

.innerText='';	.innerHTML='';
不识别HTML标签 去除标签和空格和换行	W3C标准，识别HTML标签 不去除标签和空格和换行

2.改变元素属性

(1) img.src='images/1dh.jpg';

获取元素.属性名='';
src href title alt

3.改变表单元素

获取元素.属性名='';
type value checked selected disable
修改表单中内容：input.value=''; 不是input.innerText 禁用：btn.display=true; 没有''

4.改变元素样式、属性

样式.style. ='';	属性.className='';
修改的样式比较少，功能简单	修改的样式比较多，直接加个类，把样式写在类里
message.style.display=''; message.style.backgroundColor=''; message.style.backgroundPosition='0 -44px';	p.className='原来的类名 新加的类名';

五、查

1.DOM提供的API方法 id TagName

(1).按id名

• document.getElementById('id名')
• 必须是字符串，所以要加''
• 返回对象，没有返回null

(2).按标签名

• document.getElementsByTagName('标签名')
• 必须是字符串，所以要加''
• 返回对象集合，以伪数组形式存储，没有返回空的对象集合
• 必须指明是是哪一个父元素，父元素必须是某一对象

2.H5提供的新方法 ClassName querySelector() querySelectorAll()

(1).按类名

• document.getElementsByClassName('标签名')
• H5新增
• 必须是字符串，所以要加''
• 返回对象集合，以伪数组形式存储，没有返回空的对象集合
• 必须指明是是哪一个父元素，父元素必须是某一对象

(2).按选择器

1. 父标签.querySelector('符号+选择器名')
   • H5新增
   • 返回第一个元素
2. 父标签.querySelectorAll('符号+选择器名')
   • H5新增
   • 返回所有对象集合

3.选择body、HTML标签

(1). document.body; (2). document.documentElement;

4.利用节点操作获取元素

利用nodeType判断节点类型
1–元素节点
2–属性节点
3–文本节点

(1).父

• node.parentNode;
• 没有括号
• 返回离node最近的节点，没有返回null

(2).子

node.childNodes;	有s 返回集合 返回所有子节点(包含123)
node.children;	很常用 非标准 返回集合 只得到**1元素节点
node.firstChild; node.lastChild;	返回子节点123
node.firstElementChild; node.lastElementChild;	返回子元素节点1
node.children[0]; node.children[node.children.length-1];	实际中常用

(3).兄

node.nextsibling; node.previoussibling;	返回下/上一个兄弟节点(包含123) 没有返回null
node.nextElementsibling; node.previousElementsibling;	返回下/上一个兄弟元素节点1 没有返回null

查询操作总结：

按id名选择	父标签.getElementById('id名')	必须是字符串，所以要加'' 返回对象，没有返回null
按标签名选择	父标签.getElementsByTagName('标签名')	返回对象集合，以伪数组形式存储，没有返回空的对象集合 必须指明是是哪一个父元素，父元素必须是某一对象
按类名选择	父元素.getElementsByClassName('标签名')	H5新增
按选择器名称	父标签.querySelector('符号+选择器名')	H5新增 返回第一个元素
按选择器名称	父标签.querySelectorAll('符号+选择器名')	H5新增 返回所有对象集合
选择body	document.body;
选择HTML	document.documentElement;
选择父节点	node.parentNode;	没有括号 返回离node最近的节点，没有返回null
选择子节点	node.children; node.children[0]; node.children[node.children.length-1];	左边的都是返回子元素节点
选择兄弟节点	node.nextElementsibling; node.previousElementsibling;	返回下/上一个兄弟元素节点1 没有返回null

六、属性操作

• 针对自定义属性
• 例如：给ul中的li设置索引号

得到	node.getAttribute('属性名');
设置	node.setAttribute('属性名','值');
移除	node.removeAttribute('属性名');

七、事件操作

1.注册事件

传统方式	方法监听注册
元素.事件操作=function(){}	元素.addEventListener('事件操作',function(){}[,useCapturel])
事件操作开头有on onclick onmouseout 对同一个元素注册多个事件，后边的会覆盖前边的	w3c标准 i9及以上浏览器支持 事件操作必须是字符串, 有’’ 、不带on function(){}事件处理函数 也叫监听器 useCapturel可选属性、布尔值、默认false。省略或false指冒泡，true指捕获。

2.删除事件

传统方式	方法监听注册
元素.事件操作=null	removeEventListener

（1）传统方式
元素.事件操作=null

（2）方法监听注册

divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

3.DOM事件流

• 指事件传播过程
• 捕获事件-当前目标阶段-冒泡阶段

4.事件对象

• 有事件才会存在事件对象
• 由系统创建
• 是事件的一系列相关数据的集合

常见属性和方法

返回触发事件的对象(元素) e.target	this 返回绑定的对象(元素) e.currentTarget返回触发事件的对象(元素)
阻止默认事件 1.e.preventDefault() 2.e.returnValue 3.return false	让链接不再跳转、让提交按钮不提交 1.用方法，dom标准 2.用属性 低版本使用 3.但是执行后后边语句不执行
阻止冒泡e.stopPropagation()

5.事件委托

给父节点添加侦听器， 利用事件冒泡影响每一个子节点

6.鼠标事件对象

(1)鼠标事件

(2)鼠标事件对象

e.clientX e.clientY	鼠标在可视区的x和y坐标
e.pageX e.pageY	鼠标在页面文档的x和y坐标
e.screenX``e.screenY	鼠标在电脑屏幕的x和y坐标

7.键盘事件对象

(1)键盘事件

三个事件的执行顺序：keydown – keypress – keyup

keyup	按键弹起的时候触发 、不区分字母大小写
keydown	按键按下的时候触发 能识别功能键 、不区分字母大小写
keypress	按键按下的时候触发 不能识别功能键、区分字母大小写

(2)键盘事件对象

e.key	有兼容性问题
e.keycode	返回ASC码

八、复制元素

• 先克隆元素
• 再添加元素

浅拷贝	深拷贝
元素.CloneNode(false或者省略不写)	元素.CloneNode(true)
只复制标签，不复制内容	标签和内容都复制