JavaScript的DOM操作

html里面存在一个问题因为代码都是从上到下执行的,那么如果你的js代码是放在body上面,那么就会先加载功能在加载页面,为了提高用户的体验采取以下方法

document.onload = function(){
  js代码
}

1. 获取节点

var 变量名 = document.getElementsByClassName('class的属性值') // 获取的是一个数组
var 变量名 = document.getElementById('id的属性值') // id是唯一的所以获取的直接是一个对象
var 变量名 = document.getElementsByTagName('标签名') // 标签页是可能多个所以是一个数组
var 变量名 = document.getElementsByName('name的属性值') // 也是一个数组

1. 节点元素

var box = documen.getElementById('box') // 获取id为box的元素节点
box.innerHTML // 获取该元素的文本内容
box.value // 获取该元素的value属性值
box.style // 获取该元素的样式,比如字体颜色box.style.color
box.id // 获取该元素的id属性值,box.class就是获取class的属性值
box.parentNode // 获取该元素的父节点,也就是上一层,父节点唯一仅有一个
box.children  // 获取该元素的所有子节点,为一个数组

1. 创建节点

var 变量名 = document.createElement('标签名') // 元素节点
var 变量名 = document.createTextElement('文本内容') // 文本节点

1. 删除节点

var p = documen.getElementsByTagName('p')[0] //获取P标签节点
p.removeChild(p) // 删除P标签节点

1. 插入节点

var p = document.createElement('p')
var box = documen.getElementById('box')
box.appendChild(p) // 在box最后面追加p子节点
box.insertBefore(p,a) // 在box的a子节点前面追加p节点

1. 克隆节点

var box = documen.getElementById('box')
var 变量名 = box.cloneNode(box) // 克隆box节点

1. 替换节点

var box = documen.getElementById('box')
box.replaceChild(new, old)

鼠标事件

• 单击鼠标事件

var box = documen.getElementById('box')
box.onclick = function(){
    函数内容
}// 鼠标单击这个元素节点的时候触发函数

• 双击鼠标事件

box.ondbclick = function(){
    函数内容
}// 鼠标双击这个元素节点的时候触发函数

• 鼠标按下不放事件

box.onmousesetdown = function(){
    函数内容
}// 鼠标按下不放这个元素节点的时候触发函数

• 鼠标松开事件

box.onmousesetup = function(){
    函数内容
}// 鼠标按下后松开的时候这个元素节点的时候触发函数

• 鼠标移入事件

box.onmouseentet = function(){
    函数内容
}// 鼠标移入这个元素节点的时候触发函数

• 鼠标移出事件

box.onmouseleave = function(){
    函数内容
}// 鼠标移出这个元素节点的时候触发函数