Dom随笔

js 声明对象

//直接声明
var obj =  {
    v : 0,
    fct : function(){
        alert("hhhhhhh");
    }

//利用 Object()对象
obj = new Object();
        obj.sss = "sss";
        obj.sai = function(){
            console.log("ssssss")
        }

//构造函数
function class1(a)
        {
            this.a = a;
            this.app = function(){
                time = Date();
                inputTime =new Date("2021-8-10 12:00:00").getTime();
                console.log(time);
                console.log(a);
            }
        }
        a = new class1(Math.PI);

获得元素
- document.getElementById('')
  - 返回元素对象
- document.getElementsByTagName('a');
  - 返回伪数组(元素数组)
  - 获取父元素下指定标签下子元素
    - element.getElementsByTagName('a');
HTML5
- document.getElementsByClassName
- document.querySelector('选择器')//返回第一个 .class #id tag
- document.querySelectorAll('选择器')
document.body //body
document.documentElement //html
获取内容
- element.innerText
  - 起始到终止位置的内容，去除html标签，去除空格和换行
- element.innerHTML（标准）
  - 起始到终止位置的内容，不去除html标签，不去除空格和换行
- li.innerText = text.value + 'del'; //sdssdsdsdel
- li.innerHTML = text.value + 'del'; //sdssdsdsdel//识别标签
禁用元素
- element.disabled = true;
- btn.disabled = 'true';

更改样式

1. 直接修改
- element.style.backgroundColor = 'black';//驼峰命名backgroundColor
- box.style.display = 'none';
1. 修改类
- this.className = "c2";//更改类
- this.className = "c1 c2";//保留原先类
获取元素属性值
- element.属性//
- element.getAttribute('id')//主要获得自定义属性
设置属性值
- element.属性='';
- element.setAttribute('属性','值');
移除属性
- removeAttribute('属性')
自定义属性
- H5规范： data-开头
  - data-time
- 获取H5自定义属性
  - 兼容性获取 element.getAttribute('data-index')
  - H5新增 element.dataset.index/element.dataset['index']
    - element.getAttribute('data-index-name')
    - element.dataset.index/element.dataset['indexName']//驼峰命名法
  - dataset是一个集合，存放所有以data开头的自定义属性

节点操作

nodeType
- 元素 1
- 属性 2
- 文本 3
父节点 parentNode 最近
- div.parentNode
子节点 childNodes
- 所有的子节点包含元素节点 文本节点等等
- 子元素节点
  - parentNode.children 获取所有子元素节点
- firstChild 第一个子节点包含元素节点文本节点等等
- lastChild 最后一个子节点包含元素节点文本节点等等
- 子元素节点
  - firstElementChild 子元素节点（兼容性问题）
  - lastElementChild 子元素节点（兼容性问题）
    - 解决方法
    - children[0]
    - children[children.length-1]
兄弟节点
- nextSibling 下一个兄弟节点包含元素节点文本节点
- previousSibling 上一个兄弟节点包含元素节点文本节点
- nextElementSibling 下一个兄弟元素节点（兼容问题）
- previousElementSibling 上一个兄弟元素节点（兼容问题）
- 解决方法：自己封装一个兼容性函数
  - 根据nodetype
创建节点
- var li = document.creatElement('li');
添加节点
- node.appendChild(child) //node 父级先创建后添加（添加原有节点，会移除原有节点）
- node.insertBefore(child,指定元素)
  - var child = node.appendChild(child)//返回子节点
删除子节点
- node.removeChild(child)
复制节点
- node.cloneNode() 返回节点副本
  - ()内参数为空或为false - 浅拷贝只复制标签(节点及属性)不复制里面的内容(子节点)
  - ()参数为true - 深拷贝复制节点本身以及里面所有的子节点
动态创建元素
- document.write()
  - document.write("
    ")
  - 文档流执行完毕（页面加载完）再写入会导致页面重绘
    - btn.onclick = function(){}
    - window.onload = function(){}
- element.innerHTML //将内容写入页面的内容流
  - element.innerHTML=""//字符串
- document.creatElement()
  - var a = document.creatElement('a');node.appendChild(a);
- innerHTML 创建多个元素效率更高：
  - 不要拼接字符串(每个循环执行element.innerHTML+="")，
  - 采取数组形式拼接
- creatElement() 创建多个元素效率稍微低，但结构更清晰

var array = [];
for(){
  array.push("<a></a>");
}
element.innerHTML = array.join('');

事件

注册事件 /绑定事件

传统注册方式
- 以on开头 onclick...
- 唯一性
  - 同一元素同一事件只能设置一个处理函数，后注册函数会覆盖前面的注册函数
addEventListener 事件监听方式(兼容性问题)
- eventTarget.addEventListener(type, listener[,useCapture])
  - btn.addEventListener('click',function(){})
- 同一元素同一事件可以添加多个侦听器
attachEvent 事件监听(非标准仅ie9前版本支持)
- eventTarget.attachEvent(eventNameWithOn, callback);

删除事件

传统注册方式
- btn.onclick = null;
addEventListener 事件监听方式

    function fn(){}
    btn.addEventListener('click',fn);//里面的fn不需要加小括号调用
    btn.removeEventListener('click',fn);

eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.detachEvent(eventNameWithOn, callback)

Dom事件流三个阶段

捕获阶段执行阶段冒泡阶段
- 捕获阶段 document->html->body->div
- 冒泡 document<-html<-body<-div
  - (执行顺序)
JS代码只能执行捕获或冒泡其中的一个阶段
onclick attachEvent 只能得到冒泡阶段
addEventListener('click',fn,true)//第三个参数是 true 则处于捕获阶段 document->html->body->div
- //第三个参数是 false(默认) 则处于冒泡阶段

事件对象 (兼容性问题 window.event //ie678--console.log(window.event))

event 事件对象（作为形参）(可自命名)
- 事件对象只有有了事件才会存在系统自动创建
- 事件对象是事件的一系列相关数据的集合(鼠标信息坐标键盘信息...)
- div.onclick = function(event) {}
属性方法
- e.target 返回的是触发事件的对象
  - this 返回的是绑定事件的对象(currentTarget//兼容性)
- e.type
- 阻止默认行为
  - e.preventDefault()阻止默认行为让链接不跳转或者让提交按钮不提交 (兼容性)
    - 传统注册方式
      - 普通浏览器
        
        e.preventDefault()
      - e.returnValue //ie
      - return false//没有兼容性问题 return 后代码不执行
- 阻止冒泡
  - e.stopPropagation
  - 兼容性
    - e.cancleBubble = true;
事件委托
- 不给每个子节点单独设置事件监听器，而是给父节点添加事件监听器，利用冒泡原理影响设置每个子节点
  - ul注册点击事件，利用target找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
  - 只操作一次DOM，提高程序的性能

禁止选中文字禁止右键菜单

        var btn = document.querySelector('.box');
        btn.addEventListener('contextmenu', function(e) {//禁止右键菜单
            e.preventDefault();
        });
        btn.addEventListener('selectstart', function(e) {//禁止选中文字
            e.preventDefault();
        })

鼠标坐标

e.clientX e.clientY
- 浏览器可视区域
e.pageX e.pageY (ie9+)
- 文档页面
e.screenX e.screenY
- 电脑屏幕
鼠标事件
- mousemove//鼠标移动事件
键盘事件
- keyup
- keydown
- keypress//不能识别功能键

load 事件
- a标签的超链接
- F5刷新
- 前进后退时
pageshow事件
- firefox中的往返缓存不触发load
- 重载页面（页面可以来自缓存）触发

other

阻止链接跳转添加javascript:void(0);或javascript:;
.join("") 字符数组元素合并//.join(",")...
inputelement.focus()//使输入框获得焦点//onfocus 事件
- blur失去焦点

posted @ 2021-09-25 17:59 w0000 阅读(124) 评论(0) 编辑收藏举报

刷新页面返回顶部

w0000

Dom随笔

更改样式

节点操作

window.onload = function(){}

事件

注册事件 /绑定事件

删除事件

Dom事件流 三个阶段

事件对象 (兼容性问题 window.event //ie678--console.log(window.event))

禁止选中文字 禁止右键菜单

鼠标坐标

other

公告

Dom事件流三个阶段

禁止选中文字禁止右键菜单