• 鼠标点击事件,节点属性,基础关系,常用语法,插入元素,删除元素,替换元素,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

  • 相关阅读:
    VS Code中格式化插件Prettier-Code Formatter设置
    module5-online-jQuery关于动态轮播图的制作
    module5-jQuery 快速网页交互开发
    module5-05-jQuery 事件操作和插件
    module5-04-jQuery 节点操作和元素尺寸
    module5-03-jQuery 排序、入口函数与动画
    选配CPU的时候,最好带上孩子,学会选择才能把握机遇
    选配显示器时带上孩子,体验选配的乐趣,培养财商从细节开始
    家用电脑升级选配硬盘时带上孩子,体验选配,培养财商从细节开始
    科普文,选配内存,常识分享
  • 原文地址:https://www.cnblogs.com/wsx123/p/16592924.html
Copyright © 2020-2023  润新知