鼠标点击事件，节点属性，基础关系，常用语法，插入元素，删除元素，替换元素，element属性，setAttribute，getArribute

本文主要是介绍鼠标点击事件，节点属性，基础关系，常用语法，插入元素，删除元素，替换元素，element属性，setAttribute，getArribute，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

onblur 失去焦点
onfocus 获取焦点
onclick 鼠标点击事件，当鼠标左键点击时候会触发。 点击
ondbclick 当鼠标双击时候会触发，并有一个时间间隔，但不能太大。 双击
onmousedown 鼠标按下事件，当鼠标左中右键按下的时候触发 按着
onmouseup 鼠标抬起事件，当鼠标左中右键抬起时候触发 抬起
onmousemove 鼠标移动事件，当鼠标移动到目标元素上就会触发 移
onmouseover 鼠标移入事件，当鼠标移入到目标元素上就会触发 移入
onmouseout 鼠标移出事件，当鼠标从目标元素上移开的时候就会触发 移出
onmouseenter 鼠标移入事件，当鼠标移入到元素身上就会触发 移入
onmouseleave 鼠标移出事件，当鼠标从元素身上移出的时候触发 移出


document.getElementByid() //元素id在ie8一下的浏览器，不匹配name属性的元素
document.getElementsByTagName('div')[0] //找到所有的div，[找寻的数组]
getElementByname();//需注意：只有部分标签name可生效(img，iframe)
getElementByClassName() //类名 ie8和ie8以下的ie版本中没有
querySelector() //css选择器 在ie7和ie7以下的版本中没有
querySelectorAll() //css选择器 在ie7和ie7以下的版本中没有
createElement()


节点属性·
nodeName 打印出string类型的节点 如： div.childNodes[3].nodeName //strong
nodeValue 只能打印文本和注释的节点 b
nodetype 打印出节点的类型
attributes 打印出节点属性的集合，将属性(id = "wsx" class="gg")打印出来
hasChildNodes 判断是否还有子节点，有为true，没有false

继承关系：
document可以继承其他两个的原型（就近继承）
document --- HTMLDocument.prototype --- Document.prototype
CharacterData text(文本) Comment(注释)

常用的语法
getElementByTagName 方法定义在document.prototype和Element.prototype
document.body //打印出body
document.head //打印出head
document.documentElement //打印出页面所有

HTMLBodyElement.prototype.abc = 'demo';
var body = document.getElementsByTagName('body')[0];//demo

增加
document.createElement('div')//添加标签（但页面上不可见）
document.body.appendChild(div)//添加到页面
document.createTextNode('创建文本内容')//添加内容
document.createComment('创建注释节点')//添加注释

插入（剪切）
div.appendChild(span);//插入，将span插入div里面
div.insertBefore(i,span); 第一个标签 = 在前 ， 第二个标签 = 在后

删除
div.removeChild('i') //删除父节点下的i标签
span.remove() //删除该标签

替换
div.replaceChild(p,i),将i标签换成P

Element节点的一些属性
innerHTML 给标签增加属性 如： span.innerHTML = "<span style =background = red ; color = #fff>123</span>"
innerText（火狐不兼容） /textContent （ie9以下不兼容） 覆盖之前文本内容 如：span.innerText = '234'

setAttribute 输入 如：div.setAttribute('id','only') 打印出：<div id = 'only'>
getAttribute 打印 如：div.getAttribute('id') 打印出 only

这篇关于鼠标点击事件，节点属性，基础关系，常用语法，插入元素，删除元素，替换元素，element属性，setAttribute，getArribute的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！