Dom

获取页面元素

为什么要获取页面元素
例如：我们想要操作页面上的一部分（显示，动画），需要先获取到该部分对应的元素，才进行后续操作。

• 根据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 的collection

  getelementById("") 只能是通过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();
  }
   }