JS-DOM 黑马前端视频笔记

一、获取元素

1.按id名

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

2.按标签名

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

3.按类名

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

4.按选择器

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

5.选择body标签

6.选择HTML标签

按id名选择	父标签.getElementById('id名')	必须是字符串，所以要加'' 返回对象，没有返回null
按标签名选择	父标签.getElementsByTagName('标签名')	返回对象集合，以伪数组形式存储，没有返回空的对象集合 必须指明是是哪一个父元素，父元素必须是某一对象
按类名选择	父元素.getElementsByClassName('标签名')	H5新增
按选择器名称	父标签.querySelector('符号+选择器名')	H5新增 返回第一个元素
按选择器名称	父标签.querySelectorAll('符号+选择器名')	H5新增 返回所有对象集合
选择body	document.body;
选择HTML	document.documentElement;

二、事件基础

1.事件源

2.事件类型

3.事件处理程序

事件源	事件类型	时间处理程序
谁被触动	如何触动	触动后发生什么
选取元素	点击触发onclick 获得焦点onfocus 失去焦点onblur	被触动元素.如何触动 =function(){触动后发生什么}

三、操作元素

1.改变元素内容

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

2.改变元素属性

获取元素.属性名='';
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='原来的类名 新加的类名';

四、节点操作

利用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