JavaScript中的DOM有什么作用

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、文本框默认文字

2、添加标签

function b_b(){    var std=document.getElementById('std');    var new_b="";    std.insertAdjacentHTML('beforeBegin',new_b);}function a_b(){    var std=document.getElementById('std');    var new_b="";    std.insertAdjacentHTML('afterBegin',new_b);}function b_e(){    var std=document.getElementById('std');    var new_b="";    std.insertAdjacentHTML('beforeEnd',new_b);}function a_e(){       var std=document.getElementById('std');    var new_b="";    std.insertAdjacentHTML('afterEnd',new_b);}

3、展开同时隐藏其它子菜单：

HTML：

    
人员管理
    
        
            
1
            
2
            
3
            
4
            
5
            
6
            
7
        
    
    
组别管理
    
        
            
1
            
2
            
3
            
4
            
5
            
6
            
7
        
    

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、标签提交：