null - 程序员宅基地

原生JavaScript操作DOM标签的笔记_js 操作dom添加标签-程序员宅基地

技术标签：笔记前端 javascript

DOM

获取元素

根据ID获取

语法：document.getElementById(’id‘)

返回值：元素对象或 null

根据标签名获取元素

语法：document.getElementsByTagName(‘标签名’)

或者 element.getElementsByTagName(‘标签名’)

返回值：元素对象集合（伪数组，数组元素）

根据类名获取元素

语法：document.getElementsByClassName(‘类名’)

返回值：元素对象集合（伪数组，数组元素）

根据指定选择器获取元素

语法：document.querySelector(‘.类名或标签名’) *如果html里类名重复，只获取第一个

返回值：元素对象或 null

根据指定选择器获取全部元素

语法：document.querySelectorAll(‘.类名或标签名’)

返回值：元素对象集合（伪数组，数组元素）

获取特殊元素

获取body

document.body

获取html

document.documentElement

通过子节点获取父节点

子名.parentNode *获取的就是父

var 属性名 = document.querySelector('子名')
属性名.parentNode  // 获取的就是父标签

通过父节点获取子节点

父名.children *获取子节点

var 属性名 = document.querySelector('父名')
console.log(属性名.children);  //获取的就是子标签

兄弟节点

nextSibling *下一个兄弟节点包含元素文字节点

nextElementSibling *下一个兄弟元素节点

previousSibling *上一个兄弟节点包含元素文字节点

previousElementSibling *上一个兄弟元素节点

获取第一个节点和最后一个

两种常用方式

var ol = document.querySelector('ol');
console.log(ol.children[0]);    // 第一个子
console.log(ol.children[ol.children.length - 1]); // 最后一个子

var ol = document.querySelector('ol');
var lis = ol.querySelectorAll('li')
console.log(lis[0]);  // 第一个子
console.log(lis[lis.length-1]);  //最后一个子

传统的鼠标事件（绑定事件）

onfocus 获得焦点

onblur 失去焦点

onclick 鼠标点击后

ondblclick 鼠标双击

有文字时双击会选中文字解决方法
span.ondblclick=function(){
// 双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}

onmousemove 鼠标移动

onmouseup 鼠标弹起

onmousedown 鼠标按下

onmouseover 鼠标经过

onmouseout 鼠标离开

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发

mouseenter 鼠标进入 *不会冒泡

mouseleave 鼠标离开 *不会冒泡

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

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

传统键盘事件

onkeyup 按键弹起的时候触发

onkeydown 按键按下的时候触发

onkeypress 按键按下的时候触发 *不能识别功能键比如 ctrl shift 左右箭头

//传统键盘事件写法
document.onkeyup=function() {
      alert('我弹出了')
 }

滚动事件

scroll 滑轮滚动是触发

窗口事件

window.onload 窗口加载事件

DOMContentLoaded 窗口加载事件

window.onresize 调整窗口大小加载事件

window.innerWidth 当前屏幕的宽度

表单事件

onsubmit

$('from').on('submit', function (e) {  
   alert('监听到了表单的提交事件2')
   e.preventDefault()
})

事件侦听（注册事件）

谁.addEventListener(‘鼠标(键盘)事件’, function() { }

鼠标(键盘)事件：就是把传统鼠标(键盘)事件前的 on 去掉

// 事件侦听鼠标事件写法
btn.addEventListener('click', function (){
    alert('hi-')
})

// 事件侦听键盘事件写法
document.addEventListener('keyup', function () {
       console.log('我弹出了')
})

解绑事件（删除事件）

传统注册事件的解绑方式

鼠标事件 = null;

var div = document.querySelector('div');
        div.onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs.onclick = null;
  }

事件侦听注册事件的解绑方式

removeEventListener(‘鼠标事件去掉on’, 函数名);

*只有将函数分开写的时候才能解绑事件

divs[1].addEventListener('click', fn) 
 function fn() {
         alert(22);
         divs[1].removeEventListener('click', fn);
 }

事件委托

*可以给未来动态创建的元素绑定事件

//click 是绑定在ol 身上的，但是 触发的对象是 ol 里面的小li
var ol = document.querySelector('ol');
ol.on('click', 'li', function () {
     console.log(22);
}) 
// 可以给未来动态创建的元素绑定事件
var li = $("<li>我是后来创建的</li>")
$('ol').append(li)

操作元素

改变元素内容

innerHTML * 常用

innerText

改元素类名

获取的元素名字.className =‘新类名’

改元素样式

获取的元素名字.style.需要改的样式名=‘新样式’

改变图片

获取的元素名字.src=‘新图片地址’

名字.alt=‘ ’

名字.title=‘ ’

跳转页面

location.href=’ ’

增加类名

元素对象.className = ‘旧类名新类名’; *这样旧类名不会被覆盖掉

计数

flag

当前

this

音频播放

audio.play() // 播放

audio.pause(); //暂停

//单个网页实现单击屏幕发出声音
        function playSound(){
            var audio=document.getElementById("audio");
            if(audio.paused) {  //如果音频是暂停状态
                audio.load;     //加载音频文件
                audio.play();	//播放
            }else {             //否则，也就是说音频是播放状态
                audio.pause();  //就暂停
            }
        }
        //调用
        window.onclick=function () {
            playSound();
        }

操作表单元素

可操作属性

type 表单类型

value 显示的内容

disabled 禁用

checked 默认选中

selected

input.select() // 文本框内容处于选中状态

清除字符串前后空格

.trim()

重置表单

reset()

document.querySelector('form表单名').reset()

自定义属性操作

获取属性值

getAttribute()

div.getAttribute(‘class’) *获取class的类名

更改属性的值

setAttribute()

div.setAttribute(‘id’, 2) *把div 的id名改成2

*如果没有这个属性就增加这个属性并设置值为2 不提倡，见H5自定义属性规范。

移除属性

removeAttribute()

div.removeAttribute(‘class’) *移除class类名

H5自定义属性规范

H5规定自定义属性data-开头作为属性名并赋值

// // h5新增的获取自定义属性的方法它只能获取data-开头的

增加自定义属性

div.setAttribute(‘data-a’,1)

获取自定义属性

div.getAttribute(‘data-a’);

自定义属性集合

dataset

// // dataset 是一个集合里面存放了所有以data开头的自定义属性

console.log(div.dataset.a);

排他思想

 <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
    
            btns[i].onclick = function() {
    
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
    
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }

标签（节点）操作

创建标签（节点）

var 元素名 = document.createElement(‘标签名’);

元素名.innerHTML = ‘’ // 在这个元素里创建一个标签

添加标签

添加到后面

appendChild()

添加到谁的名.appendChild(创建标签的元素名)

var li = document.querySelector(‘li’); //创建li标签
ul.appendChild(li); // 添加到ul里

添加到前面

insertBefore()

添加到谁的名.insertBefore(创建标签的元素名,添加到谁的名.[添加的位置索引号])

var lili = document.createElement(‘li’) //创建li标签
ul.insertBefore(lili,ul.children[0]) //添加到ul 里最前索引号为0的位置

添加标签创建字符串的标签

创建

var li = '<li class=""><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';

添加

ul.insertAdjacentHTML('beforeend', li); // 插入元素内部的最后一个子节点之后。          //添加到后面

‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。

删除标签

removeChild()

父名.removeChild(父.children[0]) *删除谁里面的（谁）

ul.removeChild(ul.children[0])  //删除ul里的第一个孩子

remove（）删除所有元素

ul.remove() // 删除ul和里的所有

复制标签

cloneNode() *谁.cloneNode() 复制谁然后再添加

var lili = ul.children[0].cloneNode(true)   //复制ul里的第一个
ul.appendChild(lili)  	//添加到ul 最后

// 1. 谁.cloneNode(); 括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容

// 2. 谁.cloneNode(true); 括号为true 深拷贝复制标签复制里面的内容

DOM事件流

*子盒子和父盒子都有点击事件

三个阶段

捕获阶段
当前目标阶段
冒泡阶段

<div class="father">
        <div class="son">son盒子</div>
</div>
    <script>
        var son = document.querySelector('.son')
        var father = document.querySelector('.father')
        father.addEventListener('click',function(){
            alert('father')
        },true)
        son.addEventListener('click',function(){
            alert('son')
        },true)
     </script>

子盒子和父盒子都有点击事件
写true 为捕获阶段，就是点击子盒子先执行父盒子的事件会再执行子盒子的事件
写false为冒泡阶段，就是点击子盒子先执行子盒子的事件会再执行父盒子的事件

*传统绑定事件只有冒泡阶段

事件对象

var div = document.querySelector('div');
div.onclick=function(e) {
     console.log(e);
}     //   e  就是写一个形参来接收事件对象

e.target 返回触发事件的对象 *就是谁触发的这个事件

e.target.nodeName 返回触发这个事件的标签的字母大写

e.type 返回鼠标事件类型，比如鼠标经过，鼠标点击 *去掉on

 <ul>
        <li>abc</li>
        <li>def</li>
        <li>ghi</li>
 </ul>
 <script>
        var ul = document.querySelector('ul')
        ul.onclick = function (e) {
    
            console.log(e.target);  //点哪个li  就返回哪个li
             console.log(e.target.nodeName);  // LI
            console.log(e.type);  //  click
        }
</script>

阻止默认行为（事件）让链接不跳转或者让提交按钮不提交

e.preventDefault()

return false；也可以实现这个效果，但是return false以下的代码就不执行了，所以用他的时候需将他写在最后

<a href="http://www.baidu.com">百度</a>
  <script>
        var a = document.querySelector('a')
        a.onclick = function (e) {
            e.preventDefault();  //阻止默认行为
  }</script>

阻止冒泡

e.stopPropagation()

<div class="father">
        <div class="son">son儿子</div>
</div>
 <script>
     var son = document.querySelector('.son')
     var father = document.querySelector('.father')
     son.onclick = function (e) {
    
        alert('hi')
        e.stopPropagation(); // 阻止冒泡 子盒子弹出后 父盒子就不在弹出了
     }
     father.onclick = function () {
    
        alert('hi1')
        e.stopPropagation(); //如果父盒子还有父并且也绑定了事件，也需要阻止
 }</script>

鼠标事件对象（位置坐标）

鼠标点击时在页面的位置

 <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

键盘事件对象

e.key * 判断用户按下哪个键

e.keyCode 使用keyCode属性判断用户按下哪个键 ASCLL值判断

// 键盘事件 keyup 和 keydown 不区分字母大小写按a 得到的都是65
// keypress 区分大小写 a:97 A:65

document.addEventListener('keyup', function(e) {
   console.log(e.keyCode); }   //返回ascll值

 <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            // keyup 和 keydown 不区分字母大小写 按a 得到的都是65
            // keypress  区分大小写  a:97  A:65
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            console.log('press:' + e.keyCode);
        })
    </script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

BOM

顶级对象window

window的加载事件

页面加载事件（两种）

window.onload

是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function() {
      alert(22);
}    //传统注册方式只能写一次  如果有多个就会一最后一个为准

window.addEventListener('load', function() {
      alert(22);
})   //侦听注册事件没有限制

DOMContentLoaded

仅当DOM加载完成，不包括样式表，图片，flash等等。就可以触发

document.addEventListener('DOMContentLoaded', function() {
      alert(33);
})

// load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等

// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

window.innerWidth 当前屏幕的宽度

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。

定时器（两种）

setTimeout( )

setInterval( )

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器

setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

var timer = *给定时器一个标识符

var timer = setTimeout(function() {
     alert('时间到了')
},毫秒数)      //传统写法

var timer = setTimeout(要执行的函数的名, 延迟多少毫秒后执行)
function callback() {  //要执行的函数内容
    console.log('爆炸了');
}     //侦听写法

清除（停止）定时器

clearTimeout( );

clearInterval( )

绑定一个btn 当点击这个的时候停止定时器

var btn = document.querySelector('button')
var timer = setTimeout(function () {
    console.log('要爆炸了');
}, 3000)
btn.onclick = function () {
     clearTimeout(timer)
}

location 对象属性

location.href *获取整个 URL 地址

location.search *获取参数

location.host *获取主机（域名）

location.port *获取端口号

location.pathname *获取路径

location.hash *获取片段 #后面的内容常用于链接锚点

元素偏移量

offset 系列

.offsetTop *返回元素相对带有定位的父盒子上方的距离

.offsetLeft *返回元素相对带有定位的父盒子左侧的距离

.offsetWidth 返回元素的宽度包含边框宽度和内边距

.offsetHeight 返回元素的高度包含边框宽度和内边距

.offsetParent *返回元素的带有定位的父亲否则返回的是body

.parentNode *返回父亲是最近一级的父亲不管有没有定位

元素可视区

client 系列

.clientWidth 返回元素的宽度包含内边距 *但不包含边框

.clientHeight 返回元素的高度包含内边距 *但不包含边框

.clientTop *返回上边框的宽度

.clientLeft *返回左边框的宽度

元素滚动

scroll 系列

.scrollHeight 返回元素实际的高度包含内边距 *但不包含边框

scrollWidth 返回元素实际的宽度包含内边距 *但不包含边框

scrolltop *返回盒子被卷去的上侧距离

scrollLeft *返回盒子被卷去的左侧距离

window.pageYOffset *返回页面被卷去的上侧距离

window.pageXOffset *返回页面被卷去的左侧距离

自执行函数

(function(){ })()；

(function a (){ }())

移动端（DOM）

移动端触屏事件 touch

touchstart *手指触摸到一个dom元素时触发

touchmove *手指在一个dom元素上滑动时触发

touchend *手指从一个dom元素上离开时触发

移动端触屏事件对象

e.touches *正在触摸屏幕的所有手指的列表

e.targetTouches *正在触摸当前DOM元素的手指列表

e.changedTouches *手指状态发生了改变的列表从无到有或者从有到无

e.targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等

移动端监听事件

过渡监听

*监听某个元素的过渡效果

元素名.addEventListener('transitionend', function () {  })

移动端添加类名

classList 属性

var div = document.querySelector('div');
console.log(div.classList);  // 返回div 的类名 是伪数组形式

.classList.add（’类名’）； *追加类名

var div = document.querySelector('div');
div.classList.add('three');

.classList.remove（’类名’）; *删除类名

var div = document.querySelector('div');
div.classList.remove('one');

.classList.toggle（’类名’）; *切换类名

var btn = document.querySelector('button')
btn.addEventListener('click', function () {
    document.body.classList.toggle('bg')
})
// 如果div 本身有这个类名 就把这个类名删除  如果没有就添加这个类名

会话存储

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem('key', value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

<input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
		// 存储数据
        set.addEventListener('click', function () {
    
            // var val = ipt.value
            sessionStorage.setItem('uname', ipt.value)
            sessionStorage.setItem('set', ipt.value)
            sessionStorage.setItem('gey', ipt.value)
        })
		// 获取数据
        get.addEventListener('click', function () {
    
            console.log(sessionStorage.getItem('uname'));
        })
		// 删除数据
        remove.addEventListener('click', function () {
    
            sessionStorage.removeItem('uname')
        })
 		// 清空数据
        del.addEventListener('click', function () {
    
            sessionStorage.clear()
        })
     </script>

本地存储

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem('key', value)

获取数据：

localStorage.getItem('key')

删除数据：

localStorage.removeItem('key')

清空数据：(所有都清除掉)

localStorage.clear()

存储事件

change * 状态发生改变的时候

只存在表单元素里

 <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
    
            username.value = localStorage.getItem('username');
            remember.checked = true; // 复选框的选中状态
        }
		// 事件
        remember.addEventListener('change', function() {
    
            if (this.checked) {
    
                localStorage.setItem('username', username.value);
            } else {
    
                localStorage.removeItem('username');
            }
        })
    </script>

input事件

oninput

输入框名.addEventListener('input', function() { 
	// 当input框里的内容发生改变 就会执行函数
} )

删除数据：

localStorage.removeItem('key')

清空数据：(所有都清除掉)

localStorage.clear()

存储事件

change * 状态发生改变的时候

只存在表单元素里

 <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
    
            username.value = localStorage.getItem('username');
            remember.checked = true; // 复选框的选中状态
        }
		// 事件
        remember.addEventListener('change', function() {
    
            if (this.checked) {
    
                localStorage.setItem('username', username.value);
            } else {
    
                localStorage.removeItem('username');
            }
        })
    </script>

input事件

oninput

输入框名.addEventListener('input', function() { 
	// 当input框里的内容发生改变 就会执行函数
} )

本文链接：https://blog.csdn.net/Guard_56/article/details/135859109

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

while循环&CPU占用率高问题深入分析与解决方案_main函数使用while(1)循环cpu占用99-程序员宅基地

文章浏览阅读3.8k次，点赞9次，收藏28次。直接上一个工作中碰到的问题，另外一个系统开启多线程调用我这边的接口，然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法，放到线上后发现确实是可以正常取到结果，但是一旦调用，CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了，类似于下面这段代码。while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99

【无标题】jetbrains idea shift f6不生效_idea shift +f6快捷键不生效-程序员宅基地

文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效

node.js学习笔记之Node中的核心模块_node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是-程序员宅基地

文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别，这些API绝大多数都被包装到了一个具名和核心模块中了，例如文件操作的 fs 核心模块，http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是

数学建模【SPSS 下载-安装、方差分析与回归分析的SPSS实现(软件概述、方差分析、回归分析)】_化工数学模型数据回归软件-程序员宅基地

文章浏览阅读10w+次，点赞435次，收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件

利用hutool实现邮件发送功能_hutool发送邮件-程序员宅基地

文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢？1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件

docker安装elasticsearch，elasticsearch-head，kibana，ik分词器_docker安装kibana连接elasticsearch并且elasticsearch有密码-程序员宅基地

文章浏览阅读867次，点赞2次，收藏2次。docker安装elasticsearch，elasticsearch-head，kibana，ik分词器安装方式基本有两种，一种是pull的方式，一种是Dockerfile的方式，由于pull的方式pull下来后还需配置许多东西且不便于复用，个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码

随便推点

Python 攻克移动开发失败！_beeware-程序员宅基地

文章浏览阅读1.3w次，点赞57次，收藏92次。整理 | 郑丽媛出品 | CSDN（ID：CSDNnews）近年来，随着机器学习的兴起，有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块，内置..._beeware

Swift4.0_Timer 的基本使用_swift timer 暂停-程序员宅基地

文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停

元素三大等待-程序员宅基地

文章浏览阅读986次，点赞2次，收藏2次。1.硬性等待让当前线程暂停执行，应用场景：代码执行速度太快了，但是UI元素没有立马加载出来，造成两者不同步，这时候就可以让代码等待一下，再去执行找元素的动作线程休眠，强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待

原生JavaScript操作DOM标签的笔记_js 操作dom添加标签-程序员宅基地

DOM

获取元素

根据ID获取

根据标签名获取元素

根据类名获取元素

根据指定选择器获取元素

根据指定选择器获取全部元素

获取特殊元素

获取body

获取html

通过子节点获取父节点

通过父节点获取子节点

兄弟节点

nextElementSibling *下一个兄弟元素节点

previousElementSibling *上一个兄弟元素节点

获取第一个节点和最后一个

传统的鼠标事件（绑定事件）

onfocus 获得焦点

onblur 失去焦点

onclick 鼠标点击后

ondblclick 鼠标双击

onmousemove 鼠标移动

onmouseup 鼠标弹起

onmousedown 鼠标按下

onmouseover 鼠标经过

onmouseout 鼠标离开

mouseenter 鼠标进入 *不会冒泡

mouseleave 鼠标离开 *不会冒泡

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

传统键盘事件

onkeyup 按键弹起的时候触发

onkeydown 按键按下的时候触发

onkeypress 按键按下的时候触发 *不能识别功能键 比如 ctrl shift 左右箭头

滚动事件

scroll 滑轮滚动是触发

窗口事件

window.onload 窗口加载事件

DOMContentLoaded 窗口加载事件

window.onresize 调整窗口大小加载事件

window.innerWidth 当前屏幕的宽度

表单事件

onsubmit

事件侦听（注册事件）

解绑事件（删除事件）

传统注册事件的解绑方式

事件侦听注册事件的解绑方式

事件委托

操作元素

改变元素内容

改元素类名

改元素样式

改变图片

跳转页面

增加类名

计数

当前

音频播放

audio.play() // 播放

audio.pause(); //暂停

操作表单元素

可操作属性

type 表单类型

value 显示的内容

disabled 禁用

checked 默认选中

selected

清除字符串前后空格

重置表单

reset()

自定义属性操作

获取属性值

更改属性的值

移除属性

H5自定义属性规范

增加自定义属性

获取自定义属性

自定义属性集合

排他思想

标签（节点）操作

onkeypress 按键按下的时候触发 *不能识别功能键比如 ctrl shift 左右箭头

创建标签（节点）

添加标签创建字符串的标签

remove（）删除所有元素

e.target.nodeName 返回触发这个事件的标签的字母大写

e.type 返回鼠标事件类型，比如鼠标经过，鼠标点击 *去掉on

阻止默认行为（事件）让链接不跳转或者让提交按钮不提交

.offsetWidth 返回元素的宽度包含边框宽度和内边距

.offsetHeight 返回元素的高度包含边框宽度和内边距

.offsetParent *返回元素的带有定位的父亲否则返回的是body

.parentNode *返回父亲是最近一级的父亲不管有没有定位

.clientWidth 返回元素的宽度包含内边距 *但不包含边框

.clientHeight 返回元素的高度包含内边距 *但不包含边框

.scrollHeight 返回元素实际的高度包含内边距 *但不包含边框

scrollWidth 返回元素实际的宽度包含内边距 *但不包含边框