自学Java第四天

基于昨天的DOM

1.获取自定义属性

<div getTime='20'></div>
//用这个方法能获取到属性 但是不知道是自定义属性还是内置属性
div.getAttribute('getTime')

//于是h5就想到了方法 规范自定义属性（data-XXXX）以data-命名
div.dataset //里面放了所有以data开头的自定义属性
div.dataset.index

2.节点操作

parentNode //获取上一级 （父节点）
childNodes //获取子节点（麻烦不建议）
children	//获取子节点（建议）

//获取第一个子节点
firstChild  // 获取第一个子元素节点 包含标签等等
lastChild  // 获取最后一个子元素节点 包含标签等等
//于是就有了下面中 但是兼容i9以上
lastElementChild //最后一个节点
firstElementChild //第一个节点


//开发都这样子写 因为兼容性好
ol.children[0] //获取第一个
ol.children[ol.children.length -1] //获取最后一个

// 获取兄弟元素节点 包括标签什么什么的节点
div.nextSibling
div.previousSibling 

// 获取兄弟元素节点不包扩标签 兼容i9以上
div.nextElementSibling
div.previousElementSibling

2.1 创建添加删除节点

  var li =  document.createElement('li')
  var ul = document.querySelector('ul')
  ul.appendChild(li)//添加节点  父级.appendChild(添加的子集)

  ul.insertBefore(li,ul.children[0])//添加到第一条 
  ul.appendChild()//在尾部添加

  ul.removeChild(ul.children[0])//删除第一条

2.2 复制节点

cloneNode 复制

//获取ul
var uli=document.querySelector("ul")
//拷贝第0个然后徐复制给lili
var lili = uli.children[0].cloneNode(true)
//给uli 添加 lili 
uli.appendChild(lili)

3.DOM重点核心

1.创建

1.document.write

2.innerHTML

3.createElement

2.增

1.appendChild 后面添加

2.insertBefore 前面添加

3.改

1.修改元素属性：src href title等

2.修改普通元素内容：innerHtml、innerText

3.修改表单元素：value、type、disabled等

4.修改元素样式：style、className

4.查

1.dom提供的api方法 getElementByid等

2.H5提供的新方法： querySelector 等（提倡）

3.利用节点操作获取元素:父(parentNode). 子(children)、兄(previousElementSibling或nextElementSibling)next下提倡

4.DOM 进阶

4.1事件侦听注册事件

		//可以添加多个侦听器
		var btn = document.querySelector("button")

        btn.addEventListener("click", function() {
            alert("11")
        })
        btn.addEventListener("click", function() {
            alert("22")
        })

4.2删除事件(解绑事件)

      //1.传统删除事件
       var box = document.querySelectorAll('div')
       box[0].onclick = function() {
           alert('11111')
           box[0].onclick = null
       }
       //2.使用removeEventListener
       box[1].addEventListener('click',fn1);
       function fn1() {
           alert('222')
           box[1].removeEventListener("click", fn1);
       }

       //3.IE8 attachEvent监听 detacgEvent 删除
       box[2].attachEvent("onclick",fn2);
       function fn2() {
           box[2].detacgEvent('onclick',f2)
       }

5.DOM事件流

捕获与冒泡捕获从外到里冒泡从里到外

我们向水里面扔一块石头,首先它会有一一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;

之后会产生泡泡,会在最低点(最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。

我们在用addEventListener绑定事件时候如果第三个参数为true 就为捕获阶段

如果第三个参数为false 就是冒泡阶段

5.1 事件对象

    var div =document.querySelector('div')
    div.onclick = function(event) {

    }
	//event就是一个事件对象 
	//事件就是 点击事件这些
	//事件对象只有有了事件才会存在 系统自动创建 
	//触发了事件后 会把跟事件相关的一系列信息数据的集合都放在event

5.2鼠标事件触发条件 (重点)

onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onkeyup 某个键盘被松开 onkeydown 某个键盘被按下不区分大小写 onkeypress 某个键盘按键被按下时候触发不识别ctrl和shift 箭头区分大小写 ontextmenu 禁止右键 selectstart 禁止选中文字 onfocus 得到焦点 onblur 失去焦点

5.3常见的事件对象属性和方法

e.target 和this 的区别
1. e.target 点击那个元素就返回那个
2. this是哪个绑定了就返回哪个
e.type 返回触发事件的名字
e.preventDefault();阻止默认行为（事件）让链接不跳转啥啥啥的
e.stopPropagation() 阻止冒泡 //兼容性问题
e.cancelBubble = true //冒泡兼容ie浏览器
e.clientX
1. 鼠标在可视区的xy轴
e.cliectY
e.pageX
1. 鼠标相对文档页面的xy距离
e.pageY
e.screenX
1. 鼠标距离电脑屏幕的xy轴
e.screenY

单词及其讲解

addEventListener 监听

自学JavaScript第四天