ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-08-16 21:01:48  阅读:153  来源: 互联网

标签:打印 鼠标 元素 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,节点,属性
来源: https://www.cnblogs.com/wsx123/p/16592924.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有