javascript在web方面的使用DOM部分

一、获取元素

  1. 通过id获取

  2. 根据标签名获取

  3. 通过HTML5新增方式获取

  4. 特殊元素获取

(一)、通过id获取

1
var el = document.getElementById('id');   //找不到元素返回null
这是div内的内容
getElementById

通过getElementById获取元素

html
1
2
<div id="demo1">这是div内的内容</div>
<button class="demo1-btn">点击替换内容</button>
javascript
1
2
3
4
5
6
var el = document.getElementById('demo1');
$(document).ready(function(){
$(".demo1-btn").click(function(){
el.innerHTML="替换后的内容";
});
});
css
1

(二)、通过标签名获取

1
var el = document.getElementsByTagName('tagName');

获取元素集合,以伪数组形式存储。

(三)、通过新增方法获取

  1. 获取单个

1
var el = document.querySelector('选择器');  //根据选择器返回第一个元素对象

需要加前缀符号如:. # 等。

这是div-demo2-1内的内容
div-demo2-2
querySelector

通过getElementById获取单个元素

html
1
2
3
<div class="demo2">这是div-demo2-1内的内容</div>
<div class="demo2">div-demo2-2</div>
<button class="demo2-btn">点击替换内容</button>
javascript
1
2
3
4
5
6
var el = document.querySelector('.demo2');
$(document).ready(function(){
$(".demo2-btn").click(function(){
el.innerHTML="替换后的内容";
});
});
css
1

  1. 获取多个

1
var el = document.querySelectorAll('选择器');  //返回指定选择器所有元素对象集合
这是div-demo3-1内的内容
这是div-demo3-2内的内容
这是div-demo3-3内的内容
这是div-demo3-4内的内容
querySelectorAll

通过querySelectorAll获取元素集合

html
1
2
3
4
5
<div class="demo3">这是div-demo3-1内的内容</div>
<div class="demo3">这是div-demo3-2内的内容</div>
<div class="demo3">这是div-demo3-3内的内容</div>
<div class="demo3">这是div-demo3-4内的内容</div>
<button class="demo3-btn">点击替换内容</button>
javascript
1
2
3
4
5
6
7
8
var el = document.querySelectorAll('.demo3');
$(document).ready(function(){
$(".demo3-btn").click(function(){
for(let i=0 ;i<el.length;i++){
el[i].innerHTML='内容被改变了';
}
});
});
css
1

  1. 获取body与html

1
2
var htmlEl = document.documentElement; //获取html标签元素
var bodyEl = document.body;

二、事件

事件三要素:事件源、事件类型、事件处理程序。

(一)、事件源

1
var btn = document.getElementById('button');  //事件源

(二)、事件类型

1
var ev = btn.onclick

更多事件类型可以看W3 school HTML DOM 事件

(三)、事件处理程序

1
2
3
ev = function(){
alert('弹出对话框');
}
事件

js点击事件

html
1
<button class="demo4-btn">点击弹出对话框</button>
javascript
1
2
3
4
var el = document.querySelector('.demo4-btn');  //事件源
el.onclick = function(){
alert('弹出对话框');
}
css
1

(四)、执行事件的步骤

  1. 获取事件源 var el = document.querySelector('div')

  2. 绑定事件 el.onclick

  3. 添加事件处理程序 el.onclick = function (){ alert('选中'); }

三、元素修改

(一)、修改元素内容

div内的内容
事件修改元素内容

修改元素内容

html
1
2
<div class="demo5">div内的内容</div>
<button class="demo5-btn">点击修改div内容</button>
javascript
1
2
3
4
5
let div = document.querySelector('.demo5');
let el = document.querySelector('.demo5-btn');
el.onclick = function(){
div.innerText = '修改后的内容';
}
css
1

innerText 与 innerHTML 的区别:innerHTML 可以识别 html 标签符合 W3C 标准。而 innerText 是单纯的文本。

(二)、修改元素属性

修改元素属性

点击修改元素属性

html
1
2
<input class="demo6" type="text" value="现在是可见的内容">
<button class="demo6-btn">点击让输入框内容不可见</button>
javascript
1
2
3
4
5
6
let text = document.querySelector('.demo6');
let el = document.querySelector('.demo6-btn');
el.onclick = function(){
el.innerHTML= (el.innerHTML == "点击让输入框内容可见"?"点击让输入框内容不可见":"点击让输入框内容可见");
text.type = (text.type == "password" ? "text":"password");
}
css
1

(三)、使用className修改样式

修改样式前
className修改样式

点击修改className

html
1
2
<div id="demo7">修改样式前</div>
<button class="demo7-btn">点击添加给div添加class</button>
javascript
1
2
3
4
5
6
7
let text = document.querySelector('#demo7');
let el = document.querySelector('.demo7-btn');
el.onclick = function(){
this.innerHTML = '已添加';
text.className = 'needstyle';
text.innerHTML='修改样式后';
}
css
1
2
3
.needstyle{
color: red;
}

(四)、获取自定义属性

自定义属性可通过getAttribute()获取。

通用属性可通过element.属性获取。

1
2
3
4
<div id = "test" index = '1'><div>
var div = document.querySelector('div');
div.getAttribute('id');
div.getAttribute('index');

四、节点操作

(一)、节点概述

节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nideValue(节点值)三个基本属性。

(二).节点层级

   a.父节点

node.parentNode得到离本元素最近的父亲节点,没有则为null。

   b.子节点

parentNode.childNodes得到子节点集合,同时包含元素节点与文本节点。(标准写法)

parentNode.children得到所有子元素节点。(非标准,但使用多)

parentNode.firstChild得到第一个子节点

parentNode.firstElementChild得到第一个子元素节点

   c.兄弟节点

el.nextSibling得到下一个兄弟节点包含元素节点与文本节点。

el.previousSibling得到下一个兄弟节点包含元素节点与文本节点。

el.nextElementSibling得到下一个兄弟元素节点

el.previousElementSibling得到下一个兄弟元素节点

(三)、创建节点与添加节点

1
2
3
4
5
6
7
8
//1. 创建节点元素节点
var li = document.createElement('li');
//2. 添加节点到父级
var ul = document.querySelector('ul');
ul.appendChild(li);
//3.添加节点
var node = document.createElement('li');
node.insertBefore(node,ul.children[0]); //将元素添加到哪个子元素前
    简单留言板案例

    简单留言板案例

    html
    1
    2
    3
    4
    5
    6
    <div id="demo8-content">
    <input type="text" id="demo8-area">
    <button id="demo8-btn">点击添加</button>
    <ul id="demo8"></ul>
    <div>
    </div></div>
    javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let text = document.querySelector('#demo8-area');
    let btn = document.querySelector('#demo8-btn');
    let ul = document.querySelector('#demo8');
    btn.onclick = function(){
    if(text.value)
    {
    var li = document.createElement('li'); //创建元素
    li.innerHTML = text.value;
    ul.insertBefore(li,ul.children[0]);
    }else{
    alert('请输入内容');
    }
    }
    css
    1
    2
    3
    4
    5
    6
    #demo8-content{
    border: 1px solid black;
    height: 300px;
    width: 100%;
    overflow-y:auto;
    }

    (四)、 删除节点

    1
    2
    var ul = document.querySelector('ul');
    ul.removeChild(ul.children[0]);

    (五)、 复制节点

    1
    2
    3
    var ul = document.querySelector('ul');
    var node = li.cloneNode();
    ul.appedChild(node);
    1. cloneNode()括号内参数为空或false,则为浅拷贝,只复制标签,不复制内容。

    2. cloneNode()括号内参数为true,则为深拷贝,复制标签以及内容。

    (六)、动态创建元素

       1. document.write()创建元素

      document.write('<div>111</div>');

    • document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘。

       2. innerHTML创建元素

      el.innerHTML="<a href="#">跳转</a>"

       3. document.createElement()创建元素

      document.createElement()

    不同浏览器下,innerHTML效率比createElement高。

    五、高级事件

    (一)、注册事件

    1. addEventListener(type,listener[, useCapture])

    eventTarget.addEventListener(type,listener[, useCapture])

    将指定监听器注册到evenTarget(目标对象)上。

    • type: 事件类型字符串,如click、mouseover不需要on。

    • listener: 事件处理函数,发生时调用。

    • useCapture: 可选,为布尔值,默认为false。

    1
    2
    3
    4
    var btn = document.querySelector('#btn');
    btn.onclick = function(){} //传统方式注册事件
    -------------------------------------------;
    btn.addEventListener('click',function(){});
    1. attachEvent注册事件(了解)

    eventTarget.attachEvent(eventNameWithOn,callback)

    • eventNameWithOn: 事件类型字符串如onclick,onmouseover要带on。

    • callback: 事件处理函数。

    (二)、删除事件

    1. 传统方式

    1
    2
    3
    4
    5
    6
    var btn = document.querySelector('#btn');
    btn.onclick = function(){}
    btn.onclick = null; //传统方法删除事件
    -----------------------------------------;
    btn.addEventListener('click',function(){});
    btn.removeEventListener('click',function(){});

    六、事件对象

    (一)、事件对象概述

    btn.onclick = function(event){}其中event为事件对象。

    事件对象是事件的一系列相关数据的集合。

    事件对象

    te.target与this的区别:e.target返回的是触发事件的对象,this返回的的是绑定事件的对象。

    (二)、阻止默认行为

    跳转至百度
    阻止默认行为

    阻止默认行为

    html
    1
    <a href="https://baidu.com" id="demo9">跳转至百度</a>
    javascript
    1
    2
    3
    4
    let a = document.querySelector('#demo9');
    a.addEventListener('click',function(e){
    e.preventDefault();
    })
    css
    1

    (三)、阻止冒泡事件

    点击出现事件
    点击取消冒泡
    阻止冒泡事件

    阻止冒泡事件

    html
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="demo10">
    <div class="demo10-1">
    <div class="demo10-2">
    点击出现事件
    </div>
    </div>
    </div>
    <input class="demo10-check" type="checkbox">点击取消冒泡
    javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    let d1 = document.querySelector('.demo10');
    d1.addEventListener('click',function(e){
    alert('demo10');
    })
    let d2 = document.querySelector('.demo10-1');
    d2.addEventListener('click',function(e){
    alert('demo10-1');
    })
    let d3 = document.querySelector('.demo10-2');
    let demo10check = document.querySelector('.demo10-check');
    d3.addEventListener('click',function(e){
    alert('demo10-2');
    if(demo10check.checked){
    e.stopPropagation();
    }
    })
    css
    1
    2
    3
    4
    5
    div[class^='demo10']{
    width: 170px;
    height: 70px;
    background-color: red;
    }

    (四)、事件委托

    为父节点添加监听器,利用冒泡事件影响子节点。

    • 这是第一行
    • 这是第二行
    • 这是第三行
    • 这是第四行
    事件委托

    事件委托

    html
    1
    2
    3
    4
    5
    6
    <ul id="demo11">
    <li>这是第一行</li>
    <li>这是第二行</li>
    <li>这是第三行</li>
    <li>这是第四行</li>
    </ul>
    javascript
    1
    2
    3
    4
    5
    let ul = document.querySelector('#demo11');
    ul.addEventListener('click',function(e){
    //e.target可以得到点击对象
    e.target.style.backgroundColor = "red";
    })
    css
    1

    七、鼠标事件对象

    (一)、禁止右键菜单

    1
    2
    3
    document.addEventListener('contextmenu',function(e){
    e.preventDefaulte();
    })

    (二)、禁止选中文字

    1
    2
    3
    document.addEventListener('selectstart',function(e){
    e.preventDefaulte();
    })

    (三)、获取鼠标点击坐标

    鼠标事件对象

    原点均为左上角

    clientx轴坐标为:
    clienty轴坐标为:
    pagex轴坐标为:
    pagey轴坐标为:
    screenx轴坐标为:
    screenx轴坐标为:
    获取鼠标点击坐标

    点击红色区域获取鼠标点击坐标

    html
    1
    2
    3
    4
    5
    6
    7
    <span>clientx轴坐标为:</span><span id="demo12-clientx"></span><br>
    <span>clienty轴坐标为:</span><span id="demo12-clienty"></span><br>
    <span>pagex轴坐标为:</span><span id="demo12-pagex"></span><br>
    <span>pagey轴坐标为:</span><span id="demo12-pagey"></span><br>
    <span>screenx轴坐标为:</span><span id="demo12-screenx"></span><br>
    <span>screenx轴坐标为:</span><span id="demo12-screeny"></span>
    <div id="demo12"></div>
    javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    let el = document.querySelector('#demo12');
    let clientx = document.querySelector('#demo12-clientx');
    let clienty = document.querySelector('#demo12-clienty');
    let pagex = document.querySelector('#demo12-pagex');
    let pagey = document.querySelector('#demo12-pagey');
    let screenx = document.querySelector('#demo12-screenx');
    let screeny = document.querySelector('#demo12-screeny');
    el.addEventListener('click',function(e){
    clientx.innerHTML=e.clientX;
    clienty.innerHTML=e.clientY;
    //--------------------------------------------------------------------------------
    pagex.innerHTML=e.pageX;
    pagey.innerHTML=e.pageY;
    //--------------------------------------------------------------------------------
    screenx.innerHTML=e.screenX;
    screeny.innerHTML=e.screenY;
    })
    css
    1
    2
    3
    4
    5
    #demo12{
    width: 300px;
    height: 100px;
    background-color: red;
    }

    八、常用键盘事件

    image-20220705140850163

    (一)、keyCode判断按下的键

    • keyCode根据ASCII码获取,每当按下不同的键,都会有对应的keyCode。

    • keyup与keydown不区分大小写,如a与A都会得到65

    • keypress区分大小写,a得到97,A得到65

    • 通过e.keyCode获取ASCII码