黑马程序员-JS基础-Web APIs与DOM事件

目录

API

DOM事件的执行步骤

1.获取元素

2.绑定事件

常见鼠标事件

禁止鼠标的默认事件

常用的键盘事件

3.添加事件处理程序

元素操作

节点操作

三种动态创建元素的区别

排他思想
​​​​​

---

API

API是封装好的函数接口，web API是浏览器提供的一套操作浏览器功能和页面元素的API(包括DOM和BOM)

DOM事件的执行步骤

1.获取元素

语法：var lis = document.getElementsByTagName('li')

获取方式	语法	备注
根据ID	document.getElementById('id')
根据标签名	document.getElementsByTagName('li')	返回的是对象的集合
HTML新增方法	getElementsByClassName('box')	返回的是对象的集合
	document.querySelector('.box') document.querySelector('#nav') document.querySelector('li')	返回指定选择器的第一个元素对象
	document.querySelectorAll('.box') document.querySelectorAll('li')	所有元素对象集合
特殊元素	document.documentElement	html元素对象
	document.body	body元素对象

2.绑定事件

• 常见鼠标事件

鼠标事件	触发事件
onclick	点击鼠标左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
onmouseenter	类似onmouseover，但不会冒泡
onmouseleave	类似onmousemove，但不会冒泡

• 禁止鼠标的默认事件

禁止鼠标右键菜单

document.addEventListener('contextmenu', function(e) {

                e.preventDefault();

            })

禁止鼠标选中

 document.addEventListener('selectstart', function(e) {

            e.preventDefault();

        })

• 常用的键盘事件

onkeyup	按键松开时触发
onkeydown	按键被按下时触发
onkeypress	按键被按下时触发（除了ctrl、shift等功能键）

键盘事件的执行顺序为keydown-keypress-keyup

3.添加事件处理程序

元素操作

• 改变元素内容

div.innerText = ‘     ’	不识别html标签 非标准  去除空格和换行
div.innerHTML =‘     ’	识别html标签 W3C标准 保留空格和换行的

• 常用属性操作：src、herf、id、alt、title等

        语法：element.id='   ';

• 表单属性操作:type、value、checked、selected、disabled

 var btn = document.querySelector('button');

        var input = document.querySelector('input');

            btn.onclick = function() {

            input.value = '被点击了';

            this.disabled = true;

        }

• 样式属性操作

element.style.width=70px；	对个别样式修改
element.className = ' change '; element.className = ' first change ';	适合于样式较多或者功能复杂的情况 如果想要保留原先的类名，我们用多类名选择器

• 自定义属性操作

自定义属性	div.getAttribute('index')	获得属性值
	div.setAttribute('index', 2);	赋值或修改
	div.removeAttribute('index')	删除属性值
H5中的自定义属性 （属性名前加‘data-’前缀）	div.getAttribute('data-index')	获取属性值
	div.dataset	获取所有的自定义属性值
	div.dataset.listName	获取指定的自定义属性值
	div.dataset['listName']
	div.getAttribute('data-index'，‘2’)	赋值或修改

节点操作

• 节点的基本属性

节点类型	div.nodeType=1   元素节点 nodeType=2  属性节点 nodeType=3  文本节点
节点名称	nodeName
节点值	nodeValue

• 节点层级

节点层级	说明	语法
父节点		node.parentNode
子节点	返回所有节点类型	node.childNodes（返回一个集合） node.firstChild node.lastChild
	只返回元素节点	node.Children node.firstElementChild node.lastElementChild
兄弟节点	返回所有节点类型	node.nextSibling node.previousSibling
	只返回元素节点	node.nextElementSibling node.previousElementSibling

• 节点操作

节点操作	语法	说明
创建节点	document.creatElement('tagname')
增加节点	node.appendChild(child)
删除节点	node.removeChild(child )
复制节点	node.cloneNode( true/false)	true为深拷贝，false为浅拷贝

三种动态创建元素的区别

document.write()	将内容写入页面，文档执行完毕，页面会重绘
element.innerHTML	创建多个元素效率更高（不要采用拼接字符串的形式，而是采用数组形式拼接）
document.creatElement()	效率稍低，但结构清晰

排他思想

如果有一组元素，我们只想要某一个元素实现某种样式，需要用到排他思想

1.所有元素全部清楚样式

2.只给当前元素设置样式