지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 DOM에 대해 자세히 알아보기

JavaScript의 DOM에 대해 자세히 알아보기

青灯夜游
풀어 주다： 2019-11-27 18:15:32
앞으로
2332명이 탐색했습니다.

通过HTML DOM，可访问JavaScript HTML文档的所有元素。下面本篇文章就来给大家介绍一下，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

JavaScript의 DOM에 대해 자세히 알아보기

DOM能干啥？

●　JavaScript 能够改变页面中的所有 HTML 元素

●　JavaScript 能够改变页面中的所有 HTML 属性

●　JavaScript 能够改变页面中的所有 CSS 样式

●　JavaScript 能够对页面中的所有事件做出反应

【相关课程推荐：JavaScript视频教程】

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 
HTML DOM 模型被构造为对象的树：

JavaScript의 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=&#39;a1&#39; href=&#39;>click me</a>"
로그인 후 복사

2、操作标签：

insertAdjacentText('位置',obj) 在指定的地方插入文本内容，如果是HTML对象会以文本形式显示出来

insertAdjacentHTML('位置',obj) 在指定的地方插入html内容

位置说明：

beforeBegin：标签起始位置前（标签前）
afterBegin：标签起始位置后（标签内）
beforeEnd：标签结束位置前（标签内）
afterEnd：    标签结束位置后（标签外）
로그인 후 복사

3、标签样式操作style：

var obj = document.getElementById(&#39;i1&#39;)
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);
로그인 후 복사

事件类型：

Property
이 이벤트는 다음과 같은 경우에 발생했습니다. Property이 이벤트는 다음과 같은 경우에 발생했습니다.
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==&#39;请输入关键字&#39;){
            th.value=&#39;&#39;;
        }
    }
    function blurs(th){
        var v=th.value;
        if (v.length==0){
            th.value=&#39;请输入关键字&#39;;
            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(&#39;std&#39;);
    var new_b="<input type=&#39;button&#39; value=&#39;我是beforeBegin,在DIV前&#39; />";
    std.insertAdjacentHTML(&#39;beforeBegin&#39;,new_b);}
function a_b(){
    var std=document.getElementById(&#39;std&#39;);
    var new_b="<input type=&#39;button&#39; value=&#39;我是afterBegin,在DIV内前&#39; />";
    std.insertAdjacentHTML(&#39;afterBegin&#39;,new_b);}
function b_e(){
    var std=document.getElementById(&#39;std&#39;);
    var new_b="<input type=&#39;button&#39; value=&#39;我是beforeEnd,在DIV后&#39; />";
    std.insertAdjacentHTML(&#39;beforeEnd&#39;,new_b);}

function a_e(){   
    var std=document.getElementById(&#39;std&#39;);
    var new_b="<input type=&#39;button&#39; value=&#39;我是afterEnd,在DIV内后&#39;/>";
    std.insertAdjacentHTML(&#39;afterEnd&#39;,new_b);}
로그인 후 복사

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

HTML：

<div id="left_menu" class="left_menu">
    <div id=&#39;m1&#39; class="main_menu" onclick="show_sub_menu(this)"><span>人员管理</span></div>
    <div id=&#39;sm1&#39; 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=&#39;m2&#39; class="main_menu" onclick="show_sub_menu(this)"><span>组别管理</span></div>
    <div id=&#39;sm2&#39; 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=&#39;s&#39;+parentId;
    var childE=document.getElementById(&#39;left_menu&#39;).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(&#39;show&#39;);
            }else{
                childE[s].classList.remove(&#39;show&#39;);
            }
         }
    }}
로그인 후 복사

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(&#39;f1&#39;).submit();
    }</script>
로그인 후 복사

5、html、css、js页面分离：生产环境的写法。

每类存储为单独的文件，其中js使用dom添加事件方法，可以html更简洁。

例子：鼠标移动表格行变色

HTML：

<table id=&#39;tb&#39;>
    <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(&#39;tb&#39;).classList;
    t.add(&#39;tb_style&#39;);
    
    var mytrs=document.getElementsByTagName(&#39;tr&#39;);
    var td_numbers=mytrs.length;
    for (var td=0;td<td_numbers;td++){
        mytrs[td].onmouseover=function(){this.style.backgroundColor=&#39;red&#39;;};
        mytrs[td].onmouseout=function(){this.style.backgroundColor=&#39;&#39;;};
    }
로그인 후 복사

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에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
dom javascript
원천：51cto.com
이전 기사：JavaScript의 동시성 모델 및 이벤트 루프 메커니즘에 대한 심층적인 이해 다음 기사：Javascript 객체 프로토타입 자세히 살펴보기
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿