获取页面元素
为什么要获取页面元素
例如：我们想要操作页面上的一部分（显示，动画），需要先获取到该部分对应的元素，才进行后续操作。
-
根据id 获取元素
var div = document.getElementById('main'); console.log(div) -
根据name 获取元素
var div = document.getelementsByName('name');
console.dir(div)var divs = document.getElementsByTagName('div');
divs 是一个collection 集合（伪数组）。里面装的是得到的div对象。
如果通过getElementsByTagName（‘标签’） 没有的话就得到一个长度为0 的collectiongetelementById("") 只能是通过document 调用
getElementByTageName() 可以通过document 调用或者通过遭到的元素调用
<div id ='main"></div>
<div name ='main"></div>
document.getElementsByName()
根据给定的name 返回一个在（x）HTML document的节点列表集合。
这个方法不常用，在不同的浏览起返回的东西不一样。尽量不要用。在IE 浏览器和oper 浏览器会返回两个。其他浏览器只返回name = main的这一个
document.getElementByClassName();
根据标签的class 属性来获取。返回一个伪数组。
兼容性是IE9 以后才支持。这个方法要看着使用
Document.querySelector()
返回文档中匹配指定的选择器组的第一个元素
eg: var el = document.queryselector(".mayclass");
var el = document.queryselector("#id");
document.querySelectorAll(); // 获取所有的元素。
上面两个方法根据选择器来选择。兼用器是从ie8以后才支持的。
Element.queryselector()
属性操作
非表单元素的属性
href 、title 、id 、src、class 、Name
获取属性值，设置属性值
表单元素属性
innerHTML 和 innerText.Html
获取开始标签和结束标签之间的内容
innerHTML 获取内通时，如果内通中有标签，会把标签页获取到
innerText 获取内容的时候，如果内容中有标签，会将标签过滤掉。前后的换行和空白都去掉
html 转义符号
F8328A02-DDC6-424E-874B-F8C1FEA8546E.png
innerText 和textContent 区别
9FAC5347-91F4-42B2-952C-8DE7D5794D5B.png
表单元素属性
- value 用于大部分表单元素的内容获取（option除外）
- type 可以获取input 标签的类型（输入框或复选框等）
- disabled 禁用属性
- checked 复选框属性
- selected 下拉菜单选中属性
表单属性 设置ture 或者false
表单的焦点 onfocus
失去焦点onblur
自定义属性 getAttribute
<div id = 'box' age = '18' personId = "1"> </div>
ver box = document.getElementById('box")
console.log(box.getAttribute('age"))
console.log(box.getAttribute('personId))
设置自定义属性
box.setAttribute('sex','male')
移除属性
box.removeAttribute('sex')
节点
*nodeType 节点的类型
1 元素节点
2 属性节点
3 文本节点
- nodeName 节点的名称
- nodeValule 节点的值
元素节点的nodeValue 始终是null
节点层次结构
-
父子结构
-
父节点 parentNode （一个节点只有一个父节点）
-
子节点 childNodes （一个节点可以有很多个子节点，最终得到的是节点的内容，这里面有很多类型的节点，要通过高nodeType ===1 来判断是否是元素节点。）
-
children 获取所有的子元素 多用这个少用childNodes
节点分为 元素节点、文本节点、注释节点 -
firstChild 获取第一个子节点 （这里是节点不是元素，要注意 空的话是null ）
-
lastchild 获取最后一个子节点
-
fistElementChild 获取第一个子元素。
-
lastElementChild 获取最后一个子元素
var box = document.getelementbyId('box');
console.log(box.childNodes)；//得到的是collection 伪数组
for(var I = 0 i<box.childNodes.length;i++){
var node = box .childNodes[I];if (node.nodeType ===1){ // 判断当前的子节点是否是元素节点
}
}
兄弟关系的节点
nextSibling 下一个兄弟节点
nextElementSibling 下一个元素节点
perviousSibling 上一个节点
perviousElementsibling 上一个元素节点
动态创建元素的三种方式是
- doucument.write('新设置的内容<p>标签也可以生成</p>')
*innderHTML 简单的
var box = document.getElementById('box');
box.innerHTML = "新设置的内容<p>标签也可以生成</p>";
-
document.creatElement() 复杂的用
var div = document.createElement('div'); document.body.appendChild(div);
innerHTML 和document.creatElement()性能都差不多
innerHTML 注意字符串的拼接
常用的元素操作方法
creatElement()
appendChild()
removechild()
insertBefore(新的元素，在那个元素之前) 插入到指定的位置
replaceChild(新的元素，要替换的元素) 替换标签
事件注册
- addEventLIstener(type,listener[,options]);
第三个参数为Bool
当第三个参数为false 的时候事件的传递从上往下
当第三个参数为ture 的时候事件的传递从下往上
type 表示事件类型的字符串 https://developer.mozilla.org/zh-CN/docs/Web/Events 具体事件详见
使用
var btn= document.getElementByID('btn');
btn.addEventListenner ('click',function(){
alert();
})
btn.addEventListenner ('click',function(){
alert();
})
这样就可以给btn 添加2个事件
事件的移除
btn.onclick = null;
//如果要移除事件，注册时间的时候不能使用匿名函数
btn.addEventListener('click',function(){
btn.removeEventListener('click"，bntclick)
function btnclick(){
btn.removeEventListenner('click",btnclick); // 移除注册的函数
}
事件对象
-
type 事件的类型
-
target 事件 触发事件的动西
-
currentTarget 当前出发事件的东西
-
eventPhase 事件的阶段。1 开始 2 触发 3 冒泡
-
e.clientX获取鼠标在浏览器的可视区域的坐标
-
e.clientY获取鼠标在浏览器的可视区域的坐标
-
pageX pageY 鼠标在文档中的位置
btn.onclick = null;
//如果要移除事件，注册时间的时候不能使用匿名函数function btnclick(e){
e = e||window.event;
console.log(e.eventPhase);事件的阶段
var target = e.tatget || e.sctElement;
console.log(target)
console.log(e.cuttentRarget);
e.type (事件的类型)
e.clientX()
e.clientY()
}
box.onclick = fn;
box .onmuouseover = fn;
box.onmouseout = fn;
function fn(2){
e = e|| window.event;
e.type 就是上面函数事件的类型
switch （e.type）{
case 'click':
case 'mouseOver':
等
}
}
获取滚动位置
-
scrollLeft eg: document.body.scrollLeft
-
sctollTop eg: document.body.sctollTop
获取鼠标在页面中的位置
pageX + scrollTop
pag3Y + scrollTopLeft -
offsetLeft 获取元素在页面上的位置
-
offsetTop
-
stopPropagation() 停止事件传播 停止冒泡
cancelBubble = true 老的事件
键盘事件
-
keydown 键盘按下的时候
-
keyup 键盘弹起的时候
keyDown 和keyup的区别 keydown 的时候我们所按的键还没有落入文本框中
keyup 键盘弹起的时候按键的键已经落入文本框var text = document.getElementbyId('text'); text.onkeyDown = function(e){ //判断用户按下的是否是数字 e = e || window.event; console.log(e.keyCode); //e.keyCode. 键盘码 如果在48-59 之内的就是数字 if((e.keycodel<48 || e.keycode>57)&& e.keyCode !==8){ e.preventDefault(); } }
网友评论