1、获取元素
根据 ID 获取
document.getElementById('id名')；
返回的是一个元素对象，使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。
根据标签名获取
document.getElementsByTagName('标签名');
返回的是获取过来元素对象的集合，以伪数组的形式存储，想要操作里面的元素就需要遍历:for(var i = 0; i < x.length; i++ ){ console.log(x[i]); }
还可以获取某个元素(父元素)内部所有指定标签名的子元素:
element.getElementsByTagName('标签名');
注意：父元素element必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
通过 HTML5 新增的方法获取(i9以上支持)
1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象，里面的选择器需要加符号 .class #id
3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合
特殊元素获取
1. document.body // 返回body元素对象
2. document.documentElement // 返回html元素对象
2、事件基础
1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）
- 获取事件源（按钮）
- 注册事件（绑定事件），使用 onclick
- 编写事件处理程序，写一个函数弹出 alert 警示框
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};
禁止鼠标右键菜单：
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
禁止鼠标选中（selectstart 开始选中）：
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
5. 方法监听注册（addEventListener）：
不需要加 on
eventTarget.addEventListener(type, listener[, useCapture])
btn.addEventListener(‘click’, function(e){
xxx;
})
同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
Dom事件流：捕获阶段、冒泡阶段
事件对象（event）：写到我们侦听函数的小括号里面，当形参来看
keyup 和keydown事件不区分字母大小写 a和A得到的都是65
keypress 事件区分字母大小写 a得到的是97和A得到的是65
3、操作元素
3.1 改变普通元素（如div）内容innerText、innerHTML，常见元素属性src=、href=、id=、alt=、title=等
1、element.innerText= 非标准
innerText 不识别html标签，去除空格和换行，可读写
2、element.innerHTML= W3C标准
innerHTML 识别html标签，保留空格和换行，可读写
3.2 操作表单元素的属性type、value、checked、selected、disabled
3.3 样式属性操作
1. element.style.属性名 = 行内样式操作 权重比较高
= '0 -' + index + 'px';
2. element.className = ‘原先的类名 新类名’； 类名样式操作，适合于样式改变较多的情况
className 会直接更改元素的类名，会覆盖原先的类名
3.4 排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
</script>
</body>
3.5 自定义属性的操作
1. 获取属性值
区别：
- element.属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性
2. 设置属性值
区别：
- element.属性 = ‘值’ 设置内置属性值
- element.setAttribute('属性', '值')； 主要设置自定义的属性（标准）
3. 移除属性
- element.removeAttribute('属性');
4. 获取H5自定义data-开头的属性名，它只能获取data-开头的，自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
- 兼容性获取 element.getAttribute(‘data-index’);
element.getAttribute('data-list-name')
- H5新增 element.dataset.index 或者 element.dataset[‘index’]
element.dataset. listName
dataset 是一个集合里面存放了所有以data开头的自定义属性，ie 11才开始支持
5. 节点操作
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点
扫一扫
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
