首页 > 其他分享 >鼠标点击事件,节点属性,基础关系,常用语法,插入元素,删除元素,替换元素,element属性,setAttribute,getArribute

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

时间:2022-08-16 20:56:42浏览次数:69  
标签:打印 鼠标 元素 setAttribute 当鼠标 div document 节点 属性

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

标签:打印,鼠标,元素,setAttribute,当鼠标,div,document,节点,属性
From: https://www.cnblogs.com/wsx123/p/16592924.html

相关文章