JavaScript中的DOM有什么作用

本文介绍了“DOM在JavaScript中的作用是什么？”很多人在实际案例操作中都会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！

DOM能干啥？

JavaScript可以改变页面中的所有HTML元素。

JavaScript可以改变页面中所有的HTML属性。

JavaScript可以改变页面中的所有CSS样式

JavaScript可以响应页面中的所有事件。

加载网页时，浏览器将创建网页的文档对象模型。HTML DOM模型被构建为一个对象树：

查找元素方法：

1.直接搜索：

getElementByid():按id查找HTML元素

getElementsByTagName():通过标签名查找HTML元素(列表)

getElementsByClassName():按类名查找HTML元素(列表)

getelementsByName():按名称属性查找HTML元素(列表)

2.间接搜索：

父节点子节点所有子节点第一个子节点第一个子节点最后一个子节点下一个兄弟节点下一个兄弟节点前一个兄弟节点父元素父节点标签元素子元素所有子标签第一个元素子元素号子标签元素最后一个子标签元素下一个元素下一个兄弟标签元素前一个元素兄弟节点前一个兄弟标签元素3。添加和删除节点和元素：

操作方法：

InnerText，指定ID下所有文本的拼接，以及间隔HTML元素的移除。在outerText的编写模式下，替换innerHTML的所有子元素会根据指定的值创建一个新的DOM树，然后用这个DOM树完全替换调用元素的所有原始子节点。在外部HTML编写模式下，新元素将替换原始的DOM树值属性，以设置或返回密码字段的默认值。获取文本框的值。类操作(CSS样式表名称):

ClassName获取所有类名classList.remove(cls)删除指定的classList.add(cls)添加类的checkbox属性：

复选框。选中：选择真，不选择假tag标签操作：.

1.createElement()创建标签:

p>每个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有什么作用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！