hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开发】深切进修JavaScript之DOM

2019-11-28后端开发ki4网30°c
A+ A-
经由过程HTML DOM,可接见JavaScript HTML文档的一切元素。下面本篇文章就来给人人引见一下,有肯定的参考价值,有须要的朋侪可以参考一下,愿望对你有所协助。

DOM能干啥?

● JavaScript 可以转变页面中的一切 HTML 元素

● JavaScript 可以转变页面中的一切 HTML 属性

● JavaScript 可以转变页面中的一切 CSS 款式

● JavaScript 可以对页面中的一切事宜做出回响反映

【相干课程引荐:JavaScript视频教程】

当网页被加载时,浏览器会建立页面的文档对象模子(Document Object Model)。
HTML DOM 模子被组织为对象的树:

查找元素要领:

1、直接查找:

● getElementByid(): 经由过程 id 找到 HTML 元素

● getElementsByTagName(): 经由过程标署名找到 HTML 元素(列表)

● getElementsByClassName(): 经由过程类名找到 HTML 元素(列表)

● getelementsByName(): 经由过程name属性找到HTML元素(列表)

2、间接查找:

      parentNode  父节点
    childNodes     一切子节点
    firstChild        第一个子节点
    lastChild     末了一个子节点
    nextSibling     下一个兄弟节点
    previousSibling   上一个兄弟节点
    parentElement    父节点标签元素
    children          一切子标签
    firstElementChild   第一个子标签元素
    lastElementChild   末了一个子标签元素
    nextElementtSibling    下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素

3、增加删除节点和元素:

操纵要领:

innerText    文本,指定ID下一切文本的拼接,去除间隔的HTML元素
outerText  写情势下,替代一切子元素
innerHTML    会依据指定的值建立新的 DOM 树,然后用这个 DOM 树完整替代挪用元素本来的一切子节点。
outerHTML    写情势下,新的元素替代原有的 DOM 树
value         属性可设置或返回暗码域的默许值。猎取文本框的值。

Class属性操纵(CSS款式表名):

className 猎取一切类名
classList.remove(cls) 删除指定类
classList.add(cls)  增加类

checkbox属性:

checkbox.checked:true选中,false不选

tag标签操纵:

1、createElement()建立标签:

每一个HTML标签都有本身的属性,属性参照:https://www.w3school.com.cn/jsref/dom_obj_anchor.asp

function append_tag(){
   var a = document.createElement('a')
   var cur = document.getElementById('dd')
   a.innerHTML='click me'
   a.href='http://www.baidu.com'
   a.className='a1'
   cur.appendChild(a)    //增加标签}\\----------等同于
var a_tag="<a class='a1' href='>click me</a>"

2、操纵标签:

insertAdjacentText('位置',obj) 在指定的处所插进去文本内容,如果是HTML对象会以文本情势显示出来

insertAdjacentHTML('位置',obj) 在指定的处所插进去html内容

位置申明:

beforeBegin:标签肇端位置前(标签前)
afterBegin:标签肇端位置后(标签内)
beforeEnd:标签完毕位置前(标签内)
afterEnd:    标签完毕位置后(标签外)

3、标签款式操纵style:

var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

4、位置操纵

document.documentElement.offsetHeight    总文档高度
document.documentElement.clientHeight    当前文档占屏幕高度
tag.offsetHeight    本身高度
tag.offsetTop    间隔上级定位高度
tag.offsetParent 父定位标签
tag.scrollTop 转动高度
/*
    clientHeight -> 可见地区:height + padding
    clientTop    -> border高度
    offsetHeight -> 可见地区:height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高:height + padding
    scrollTop    -> 转动高度
    迥殊的:
        document.documentElement代指文档根节点
*/

事宜:

addEventListener() 要领用于向指定元素增加事宜句柄。

addEventListener() 要领增加的事宜句柄不会掩盖已存在的事宜句柄。

你可以向一个元素增加多个事宜句柄。

你可以向同个元素增加多个同范例的事宜句柄,如:两个 "click" 事宜。

你可以向任何 DOM 对象增加事宜监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 要领可以更简朴的掌握事宜(冒泡与捕捉)。

当你运用 addEventListener() 要领时, JavaScript 从 HTML 标记中星散开来,可读性更强, 在没有掌握HTML标记时也可以增加事宜监听。

你可以运用 removeEventListener() 要领来移除事宜的监听。

语法:

element.addEventListener(event, function, useCapture);

事宜范例:

属性
此事宜发作在什么时候... 属性 此事宜发作在什么时候...
onabort 图象的加载被中断。 onload 一张页面或一幅图象完成加载。
onblur 元素落空核心。 onmousedown 鼠标按钮被按下。
onchange 域的内容被转变。 onmousemove 鼠标被挪动。
onclick 当用户点击某个对象时挪用的事宜句柄。 onmouseout 鼠标从某元素移开。
ondblclick 当用户双击某个对象时挪用的事宜句柄。 onmouseover 鼠标移到某元素之上。
onerror 在加载文档或图象时发作毛病。 onmouseup 鼠标按键被松开。
onfocus 元素取得核心。 onreset 重置按钮被点击。
onkeydown 某个键盘按键被按下。 onresize 窗口或框架被从新调解大小。
onkeypress 某个键盘按键被按下并松开。 onselect 文本被选中。
onkeyup 某个键盘按键被松开。 onsubmit 确认按钮被点击。
onunload 用户退出页面。

键盘鼠标事宜:

属性 形貌
altKey 返回当事宜被触发时,"ALT" 是不是被按下。
button 返回当事宜被触发时,哪一个鼠标按钮被点击。
clientX 返回当事宜被触发时,鼠标指针的程度坐标。
clientY 返回当事宜被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事宜被触发时,"CTRL" 键是不是被按下。
metaKey 返回当事宜被触发时,"meta" 键是不是被按下。
relatedTarget 返回与事宜的目的节点相干的节点。
screenX 返回当某个事宜被触发时,鼠标指针的程度坐标。
screenY 返回当某个事宜被触发时,鼠标指针的垂直坐标。
shiftKey 返回当事宜被触发时,"SHIFT" 键是不是被按下。

小例子:

1、文本框默许笔墨

<input id="i1" type="text" onfocus="foucs(this)" onblur="blurs(this)" value="请输入关键字"/>
<script>
    function foucs(th){
        var v=th.value;
        if (v=='请输入关键字'){
            th.value='';
        }
    }
    function blurs(th){
        var v=th.value;
        if (v.length==0){
            th.value='请输入关键字';
            th.style.color="gray";
            th.style.border="1px solid red";
        }
    }</script>

2、增加标签

<div style="border: 1px solid red;" id="std"></div>
function b_b(){
    var std=document.getElementById('std');
    var new_b="<input type='button' value='我是beforeBegin,在DIV前' />";
    std.insertAdjacentHTML('beforeBegin',new_b);}
function a_b(){
    var std=document.getElementById('std');
    var new_b="<input type='button' value='我是afterBegin,在DIV内前' />";
    std.insertAdjacentHTML('afterBegin',new_b);}
function b_e(){
    var std=document.getElementById('std');
    var new_b="<input type='button' value='我是beforeEnd,在DIV后' />";
    std.insertAdjacentHTML('beforeEnd',new_b);}

function a_e(){   
    var std=document.getElementById('std');
    var new_b="<input type='button' value='我是afterEnd,在DIV内后'/>";
    std.insertAdjacentHTML('afterEnd',new_b);}

3、睁开同时隐蔽别的子菜单:

HTML:

<div id="left_menu" class="left_menu">
    <div id='m1' class="main_menu" onclick="show_sub_menu(this)"><span>职员治理</span></div>
    <div id='sm1' class="sub_menu">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>

    <div  id='m2' class="main_menu" onclick="show_sub_menu(this)"><span>组别治理</span></div>
    <div id='sm2' class="sub_menu">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div></div>

js:

function show_sub_menu(th){
    var parentId = th.id;
    var childId='s'+parentId;
    var childE=document.getElementById('left_menu').children;
    for (var s in childE){
        var e=childE[s].classList;
        console.log(e);
        if (e){
            if (childE[s].id==childId){
                childE[s].classList.add('show');
            }else{
                childE[s].classList.remove('show');
            }
         }
    }}

4、标签提交:

<!-- DOM提交标单!--><form id="f1" action="search.html">
    <input id="input1" type="text"/>
    <a onclick="a_submit()">提交吧</a></form><script>
    function a_submit(){
        document.getElementById('f1').submit();
    }</script>

5、html、css、js页面星散:生产环境的写法。

每类存储为零丁的文件,个中js运用dom增加事宜要领,可以html更简约。

例子:鼠标挪动表格行变色

HTML:

<table id='tb'>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>

JS:给table增加属性和class

 var t=document.getElementById('tb').classList;
    t.add('tb_style');
    
    var mytrs=document.getElementsByTagName('tr');
    var td_numbers=mytrs.length;
    for (var td=0;td<td_numbers;td++){
        mytrs[td].onmouseover=function(){this.style.backgroundColor='red';};
        mytrs[td].onmouseout=function(){this.style.backgroundColor='';};
    }

css

.tb_style{
    bacground-color:pink;}

6、词法剖析:形参--》函数体内函数,编译时函数体内的函数会分派 内存地址,掩盖形参。

function cifa(age){
    console.log(age);        \\function age
    age=22;
    console.log(age);        \\22
    function age(){};
    console.log(age);        \\22}age(3)

以上就是深切进修JavaScript之DOM的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开发】深切进修JavaScript之DOM

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>