window.onload 用来表示在页面加载完成后才运行js文件，防止js有bug导致页面加载不出来

document选择器

选中doc后，通过不同的选择器来选择对象
document.getElementById() —-通过id来选择，id值唯一
document.getElementByTagName() —通过标签来选取，返回数组
document.getElementByClassName() —-通过class来选取标签，返回数组
document.getElementByName() —-通过name来选择，只通过IE8
兼容css选择器,可以像css一样选择标签，只是他只会选中第一个

document.querySelector(“#id”)
document.querySelector(“.aa”)
document.querySelector(“p”)

兼容css选择器,可以像css一样选择标签，选中全部

document.querySelectorAll(“.h2”)[0] —选中class为h2的第一个标签

document常用事件
onclick 点击
ondblclick 双击
onmousedown 按钮被按下（长按）
onmouseup 鼠标按键被松开（放开）
onmouseenter 指针移动到元素上时触发，不支持冒泡，只触发一次
onmouseseleave 指针移除元素时触发，不支持冒泡，只触发一次
onmousemove 鼠标移入，但是这和只要在元素内移动都会触发，触发很多次
onmouseover 鼠标移动到某元素之上，支持冒泡，只触发一次
onmouseout 鼠标从某元素移开，支持冒泡，只触发一次
onkeyup 键盘松开
onkeydown 某个键盘被按下

onkeypress 键盘按下并松开

window.onload = function(){
  var msg = 'hello msg';
  // document.querySelector('.btn2').addEventListener('click',func)
  document.querySelector('.btn2').onmousedown = func
  document.querySelector('.btn2').onmouseup = func2
  document.querySelector('.btn3').onmouseenter = func3
  document.querySelector('.btn3').onmouseleave = func4
  document.querySelector('.btn4').onmousemove = func5
  document.querySelector('.btn5').onkeyup = function(){
      document.querySelector('#text').innerHTML = this.value;
  }
  function func(){
      document.querySelector('#text').innerHTML = '改变按钮';
  }
  function func2(){
      document.querySelector('#text').innerHTML = 'hello world';
  }
  function func3(){
      document.querySelector('#text').style.color = 'red';
  }
  function func4(){
      document.querySelector('#text').style.color = 'black';
  }
  function func5(event){
      document.querySelector('#text').innerHTML = event.clientX;
  }
}

document对象常见的属性和方法

document.activeElement 返回当前的焦点元素，即鼠标选定的元素

document.getElementById("my").onclick = function(){
  document.getElementById("text").innerHTML = document.activeElement.tagName;
}

document.addEventListener() 向文件添加句柄

document.getElementById('my').addEventListener('click',myfunction);
function myfunction(){
  document.getElementById("text").innerHTML = document.activeElement.tagName;
}

document.createElement() 创建元素节点

document.createTextNode() 创建文本节点，动态追加内容

document.querySelector(".btn4").onclick = function(){
  var _div = document.createElement("div")
  var _text = document.createTextNode("Hello world")
  _div.appendChild(_text)
  document.body.appendChild(_div)
}

节点组成

元素节点 html body div button
文本节点展示的内容
….
属性节点

不同的节点其的nodetype不一样:
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;

document.firstChild 返回第一个子节点
document.lastChild 返回最后一个子节点

document.childNodes 返回全部的子节点

//点击第一个列表任意一个元素，其元素就移动到第二个列表
var _leftlist = document.querySelector('.ul1').childNodes;//获取全部子节点
for(var i=0;i<_leftlist.length;i++){
  if(_leftlist[i].nodeType == 1){
      _leftlist[i].addEventListener('click',move);
  }
}
function move(){
  document.querySelector(".ul2").appendChild(this);//this表示点击的对象
}

WEB开发

js

document选择器

document常用事件

document对象常见的属性和方法

节点组成

数据类型