JavaScript DOM API 지식 공유-JS 튜토리얼-php.cn

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 페이지 태그 선택, 페이지 태그 속성 운영 등 DOM API 지식과 관련된 문제를 정리합니다. 모두에게 도움이 되기를 바랍니다.

JavaScript DOM API 지식 공유

JavaScript DOM API 지식 공유.DOM API 지식 공유DOM API 지식 공유>JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유 페이지 태그 선택DOM API 지식 공유>

DOM에서는 문서 페이지 전역 개체, 함수 querySelector 및 querySelectorAll은 CSS 선택기를 전달하여 요소를 선택하는 데 사용됩니다. 선택 범위는 함수 앞에 존재하는 선택기입니다. 찾을 수 없는 경우 반환 값은 null입니다.

let obj = document.querySelector("选择器");

로그인 후 복사

JavaScript DOM API 지식 공유

페이지에 선택한 태그가 여러 개 있는 경우 페이지에 처음 나타나는 태그만 선택됩니다.

JavaScript DOM API 지식 공유
이러한 요소를 모두 선택하려면 querySelectorAll 함수를 사용해야 합니다.

사용법은 querySelector와 동일합니다.

let var_name = document.querySelectorAll("选择器");

로그인 후 복사

이 함수는 배열과 유사한 객체를 반환합니다. 사용법은 배열과 완전히 동일하지만 추가로 키-값 쌍을 추가할 수 있습니다.
JavaScript DOM API 지식 공유
배열의 요소를 확장하면 DOM의 기본 속성인 많은 속성을 찾을 수 있습니다.

JavaScript DOM API 지식 공유

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유 페이지 태그 속성 조작DOM API 지식 공유>JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유 이벤트DOM API 지식 공유>

많은 JS 코드는 마우스 움직임, 마우스 스크롤, 키보드 입력, 브라우저 크기 변경 등과 같은 "이벤트"에 의해 트리거됩니다.

이벤트의 세 가지 요소:

이벤트 소스, HTML 요소가 이벤트를 생성했습니다.
마우스 이동, 마우스 클릭, 창 크기 변경 등과 같은 이벤트 유형
이벤트 처리 방법, 이벤트 발생 시 어떤 js 코드를 실행해야 하는지.

예를 들어, 클릭 이벤트 연산 코드:

let button = document.querySelector("button");button.onclick = function (){
    alert("嘻嘻嘻！");}

로그인 후 복사

밤나무와 달리기 효과:
JavaScript DOM API 지식 공유

그림은 동일한 작성 방법을 보여주지만, 동일한 작성 방법은 HTML 코드의 구조를 더 복잡하게 만들기 때문에 더 복잡합니다. 그림에서 첫 번째 글쓰기 방법을 제안해 주세요.

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유 요소 분류 가져오기 DOM API 지식 공유>

작업 요소:

요소의 내용.
요소의 속성.
요소의 스타일.

우선 요소의 콘텐츠를 조작하려면 innerHTML 속성을 사용하여 태그 내부의 콘텐츠를 가져올 수 있습니다.

//JavaScript DOM API 지식 공유.选中标签let var_name = document.querySelector();//JavaScript DOM API 지식 공유.获取内容let content = var_name.innnerHTML;//JavaScript DOM API 지식 공유.修改内容var_name.innerHTML = 修改内容;

로그인 후 복사

밤나무:

JavaScript DOM API 지식 공유
효과:

동일한 요소가 모두 축소되어 출력되는 것을 발견했습니다. 개발자 도구의 설정 표시줄을 클릭하여 확장된 출력을 설정할 수 있습니다.

JavaScript DOM API 지식 공유
위에서 선택한 라벨에 넣은 것이 텍스트라면 어떨까요? 실제로는 목록 태그가 내부에 배치되어 있다고 가정하면 얻은 결과는 내부 태그의 HTML 코드입니다.

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유 요소 수정DOM API 지식 공유>

목록을 제목으로 변경하는 등 HTML의 내용을 수정할 수도 있습니다.

JavaScript DOM API 지식 공유
효과:

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유 카운터DOM API 지식 공유>

요소 획득 및 수정에 대한 지식을 바탕으로 간단한 카운터를 구현할 수 있습니다.

获取元素内容
修改元素内容（加一操作）
写回到元素里面

JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유
JavaScript DOM API 지식 공유：

欸，好像与我们的预期有点不一致，原因就是修改元素内容时，拿到的内容是字符串类型的，发生的是拼接JavaScript DOM API 지식 공유，而不是算术JavaScript DOM API 지식 공유，所以我们需要进行转换，那如何转换？我们可以使用与java非常类似且同名的一个方法，它就是parseInt，同理如果需要小数那就有parseFloat，注意这里没有parseDouble方法哦！

JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유
JavaScript DOM API 지식 공유：

我们来丰富一下，加一个按钮，可以完成减的功能。

页面JavaScript DOM API 지식 공유：

    <style>
        #screen{
            width: 88px;
            height: JavaScript DOM API 지식 공유0px;
            text-align: center;
            line-height: JavaScript DOM API 지식 공유0px;
            border-radius: JavaScript DOM API 지식 공유px;

            background-color: rgb(JavaScript DOM API 지식 공유00, JavaScript DOM API 지식 공유00, JavaScript DOM API 지식 공유00);
        }
        #plus, #sub{
            width: JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유px;
            height: JavaScript DOM API 지식 공유0px;
            border-radius: JavaScript DOM API 지식 공유0px;
            margin-top: JavaScript DOM API 지식 공유px;
            border: 0px;

            background-color: rgb(JavaScript DOM API 지식 공유80, JavaScript DOM API 지식 공유00, JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유);
        }
    </style>
    <p>
        0    </p>
    <button>计数+JavaScript DOM API 지식 공유</button>
    <button>计数-JavaScript DOM API 지식 공유</button>

    <script>

    </script>

로그인 후 복사

JavaScriptJavaScript DOM API 지식 공유：

let plus = document.querySelector("#plus");let sub = document.querySelector("#sub");let plus_func = function() {
    //JavaScript DOM API 지식 공유.获取值
    let add_btn = document.querySelector("#screen");
    let val = add_btn.innerHTML;
    val = parseInt(val);
    //JavaScript DOM API 지식 공유.+JavaScript DOM API 지식 공유
    val = val + JavaScript DOM API 지식 공유;
    //JavaScript DOM API 지식 공유.写回
    add_btn.innerHTML = val;}let sub_func = function() {
    //JavaScript DOM API 지식 공유.获取值
    let sub_btn = document.querySelector("#screen");
    let val =sub_btn.innerHTML;
    val = parseInt(val);
    //JavaScript DOM API 지식 공유.-JavaScript DOM API 지식 공유
    val = val - JavaScript DOM API 지식 공유;
    //JavaScript DOM API 지식 공유.写回
    sub_btn.innerHTML = val;}plus.onclick = plus_func;sub.onclick = sub_func;

로그인 후 복사

JavaScript DOM API 지식 공유：

JavaScript DOM API 지식 공유
但是对于但标签是没有innerHTML属性的，比如input标签，虽然不能通过innerHTML获取属性，但是可以通过value属性获取内容。

页面JavaScript DOM API 지식 공유：

    <input>
    <button>+JavaScript DOM API 지식 공유</button>

    <script>

    </script>

로그인 후 복사

JavaScriptJavaScript DOM API 지식 공유:

let add = document.querySelector("#add");add.onclick = function() {
    //JavaScript DOM API 지식 공유.获取值
    let add_btn = document.querySelector("#in");
    let val = add_btn.value;
    val = parseInt(val);
    //JavaScript DOM API 지식 공유.+JavaScript DOM API 지식 공유
    val = val + JavaScript DOM API 지식 공유;
    //JavaScript DOM API 지식 공유.写回
    add_btn.value = val;}

로그인 후 복사

JavaScript DOM API 지식 공유：

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유点击图片切换DOM API 지식 공유>

我们想实现一个小案例，就是点击一个图片就能切换图片，再点击一次又能够切换回来，我们可以利用DOM来修改元素的属性来实现，在这个案例中，我们只需JavaScript DOM API 지식 공유点击事件为修改图片的路径，也就是src属性，就可以实现图片的切换。

假设第一张图片的路径是./jee.png，第二张图片的路径是./樱花.png，实现图片切换的基本思路为：

获取img元素。
JavaScript DOM API 지식 공유onclick。
点击事件的细节就是判断路径是否包含ee，包含就将src属性换成./樱花.png，反过来，判断路径是否包含樱花，包含就将src属性换成./jee.png
可以使用indexOf方法判断是否包含某个字符串。

JavaScriptJavaScript DOM API 지식 공유：

let img = document.querySelector("img");img.onclick = function() {
    console.log(img.src);
    if (img.src.indexOf("ee") >= 0) {
        img.src = JavaScript DOM API 지식 공유9;./樱花.pngJavaScript DOM API 지식 공유9;;
    } else if (img.src.indexOf("樱花")) {
        img.src = JavaScript DOM API 지식 공유9;./jee.pngJavaScript DOM API 지식 공유9;
    }}

로그인 후 복사

页面JavaScript DOM API 지식 공유：

    <style>
        img {
            height: JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유0px;
        }
    </style>
    <img  alt="JavaScript DOM API 지식 공유" >

    <script>

    </script>

로그인 후 복사

JavaScript DOM API 지식 공유：
jsJavaScript DOM API 지식 공유JavaScript DOM API 지식 공유
具体哪些属性可以修改，我们可以使用console.dir函数来获取某个元素DOM API能够操作的全部属性。

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.6暂停/播放切换DOM API 지식 공유>

实现一个按钮，点击之后按钮文字从"播放"变为"暂停"，再点击一次，按钮文字从"暂停"变为"播放"。

实现逻辑和切换逻辑是差不多的，具体看JavaScript DOM API 지식 공유吧：

JavaScriptJavaScript DOM API 지식 공유：

let play = document.querySelector("#play");play.onclick = function(){
    if (play.value == "播放") {
        play.value = "暂停";
    } else if (play.value = "暂停") {
        play.value = "播放";
    }}

로그인 후 복사

页面JavaScript DOM API 지식 공유：

    <input>

로그인 후 복사

实现JavaScript DOM API 지식 공유：

JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.7全选/取消全选DOM API 지식 공유>

首先我们需要创建若干个复选框，只有一个全选框，我们选中全选框，其他元素需要被全部选中，一旦其他元素有未选中的，全选也必须是未选中的。

实现的基本思路：

获取全选框元素，获取其他元素。
注册全选框的点击事件，检查其他框是否都被选中，如果选中，则全选框也选中，否则全选框不选中。
对每一个其他复选框JavaScript DOM API 지식 공유点击事件，并将状态与全选复选框关联。
每次点击其他框都要检测其他框是否都选中，以确定全选框的状态。

JavaScriptJavaScript DOM API 지식 공유：

let all = document.querySelector("#all");let gameroles = document.querySelectorAll(".gamerole");//checked属性为checked表示选中状态，为空字符串表示未选中//JavaScript DOM API 지식 공유all的点击事件all.onclick = function() {
    for (let i = 0; i 页面JavaScript DOM API 지식 공유：
    <input>全选 

    <input>胡桃 

    <input>可莉 

    <input>万叶 

    <input>心海 

    <input>锅巴 
로그인 후 복사

实际JavaScript DOM API 지식 공유：

JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.8点击文字放大DOM API 지식 공유>

DOM还可以修改style属性，下面来尝试运用选中元素与修改元素的知识，来实现点击文字放大的一个小案例。

因为CSS中不区分大小写，属性与变量的命名采用脊柱式命名，而JS中-不能用于变量的命名，为了能够将CSS属性与JS变量名匹配，JS使用驼峰的形式表示CSS的属性，例如font-size属性，对应JS的变量名为fontSize。

对于文字的放大，我们可以给文本所在的标签注册一个点击事件，每点击一次就将字体大小增大，即修改CSS的font-size属性。

JavaScriptJavaScript DOM API 지식 공유：

let p = document.querySelector("p");p.onclick = function() {
    //JavaScript DOM API 지식 공유.获取文字大小属性
    let wordsSize = parseInt(p.style.fontSize);
    console.log("修改前" + wordsSize);
    //JavaScript DOM API 지식 공유.修改文字大小
    wordsSize += JavaScript DOM API 지식 공유;
    //JavaScript DOM API 지식 공유.写回到属性
    p.style.fontSize = wordsSize + "px";
    console.log("修改后" + wordsSize);}

로그인 후 복사

页面JavaScript DOM API 지식 공유：

    <p dom api>
        我是一段文本    </p>

로그인 후 복사

实现JavaScript DOM API 지식 공유：
JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.9实现关灯/开灯（夜间/白间模式切换）DOM API 지식 공유>

很多情况下一个个修改样式属性太麻烦了，我们也可以直接修改类属性来达到JavaScript DOM API 지식 공유，可以通过选中元素变量名.className来获取和修改类属性。

由于JavaScript里面的class是一个关键字，因此获取元素的class不能使用class，而需要使用className，多个class属性可以使用classList。

JavaScriptJavaScript DOM API 지식 공유：

let p = document.querySelector(JavaScript DOM API 지식 공유9;pJavaScript DOM API 지식 공유9;);let button = document.querySelector(JavaScript DOM API 지식 공유9;buttonJavaScript DOM API 지식 공유9;);button.onclick = function(){
    if (p.className == "light") {
        p.className = JavaScript DOM API 지식 공유9;blackJavaScript DOM API 지식 공유9;;
        button.innerHTML = JavaScript DOM API 지식 공유9;开灯JavaScript DOM API 지식 공유9;;
    } else if (p.className == JavaScript DOM API 지식 공유9;blackJavaScript DOM API 지식 공유9;) {
        p.className = JavaScript DOM API 지식 공유9;lightJavaScript DOM API 지식 공유9;;
        button.innerHTML = JavaScript DOM API 지식 공유9;关灯JavaScript DOM API 지식 공유9;;
    }}

로그인 후 복사

页面JavaScript DOM API 지식 공유：

    <style>        
        p{
            width: JavaScript DOM API 지식 공유00px;
            text-align: center;
        }
        .light, .black{
            width: JavaScript DOM API 지식 공유00px;
            height: JavaScript DOM API 지식 공유00px;

            text-align: center;
            line-height: JavaScript DOM API 지식 공유00px;
            font-size: JavaScript DOM API 지식 공유0px;
        }

        button{
            width: JavaScript DOM API 지식 공유00px;
            height: JavaScript DOM API 지식 공유0px;
            font-size: JavaScript DOM API 지식 공유0px;
            background-color: rgb(JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유00);
            border: 0cm;
            border-radius: JavaScript DOM API 지식 공유0px;
        }
        .light{
            background-color: aliceblue;
            color: black;
        }
        .black{
            background-color: black;
            color: aliceblue;
        }
    </style>
    <p>我是一段文本</p>
    <p>
        <button>关灯</button>
    </p>

로그인 후 복사

实际JavaScript DOM API 지식 공유：
JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유操作页面结点DOM API 지식 공유>JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유新增结点DOM API 지식 공유>

除了修改元素的属性和内容，我们还可以在页面上添加元素，要添加元素，那就得先新建一个元素，并且还需要依赖一个父元素（已经创建好的），把这个新建的元素插入到父元素中就能实现元素的添加（依赖与DOM树），这个操作也被称为新增页面结点。
新建元素：

let newp = document.createElement("元素标签");

로그인 후 복사

补充元素内容：

newp.属性 = 值;

로그인 후 복사

插入到DOM树:

选中的父元素.appendChild(创建的子元素);

로그인 후 복사

实例：
JavaScriptJavaScript DOM API 지식 공유：

let cnt = JavaScript DOM API 지식 공유;let add = document.querySelector("#add");let parent = document.querySelector("#container");add.onclick = function() {
    let newp = document.createElement("p");
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}

로그인 후 복사

页面JavaScript DOM API 지식 공유：

    <p></p>
    <button>新增节点</button>

로그인 후 복사

实际JavaScript DOM API 지식 공유：

JavaScript DOM API 지식 공유6

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유删除结点DOM API 지식 공유>

删除结点就更容易了，在DOM树上删除结点就行。

删除结点：

获取到的父元素.removeChild(需要删除的子元素);

로그인 후 복사

实例：
JavaScriptJavaScript DOM API 지식 공유：

let cnt = JavaScript DOM API 지식 공유;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() {
    let newp = document.createElement("p");
    arr[cnt-JavaScript DOM API 지식 공유] = newp;
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}let del = document.querySelector("#del");del.onclick = function() {
    cnt--;
    if (cnt > 0) {
        console.log( "成功删除一个元素");
        parent.removeChild(arr[cnt-JavaScript DOM API 지식 공유]);
    } else {
        console.log( "该父元素已经没有元素可以删除了");
        cnt++;
    }}

로그인 후 복사

页面JavaScript DOM API 지식 공유：

    <p></p>
    <button>新增节点</button>

로그인 후 복사

实际JavaScript DOM API 지식 공유：
JavaScript DOM API 지식 공유7

JavaScript DOM API 지식 공유.综合案例DOM API 지식 공유>JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유猜数字DOM API 지식 공유>

目标页面

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유

猜数字的逻辑我就不赘述了，不过里面需要取随机数，我们可以通过js中的Math.random()函数来获取随机数，该函数生成随机数的范围是[0,JavaScript DOM API 지식 공유)区间内的一个小数，我们需要的是[JavaScript DOM API 지식 공유,JavaScript DOM API 지식 공유00]之间的整数，我们可以乘上JavaScript DOM API 지식 공유00后向下取整加一就能得到目标区间的数了，实现向下取整的函数是Math.floor(数字)。

然后前端页面部分是通过HTML加上CSS弹性布局实现的，交互通过JavaScript DOM实现，下面的JavaScript DOM API 지식 공유案例也是一样的，就不多说了。

JavaScriptJavaScript DOM API 지식 공유：

//获取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#bJavaScript DOM API 지식 공유");let flash = document.querySelector("#bJavaScript DOM API 지식 공유");//生成JavaScript DOM API 지식 공유-JavaScript DOM API 지식 공유00的随机数//floor表示只取浮点数整数部分let ansNumber = Math.floor(Math.random() * JavaScript DOM API 지식 공유00) + JavaScript DOM API 지식 공유;//实现按钮猜数字的点击事件guessBtn.onclick = function(){
    //输入框没有值，表示用户没有输入，不处理
    if(input.value == JavaScript DOM API 지식 공유9;JavaScript DOM API 지식 공유9;) {
        return;
    }
    let guessNumber = parseInt(input.value);
    if (guessNumber > ansNumber) {
        ret.innerHTML = "YO!猜大了！";
        ret.style.color = "red";
    } else if (guessNumber <p>页面JavaScript DOM API 지식 공유：</p><pre class="brush:php;toolbar:false">nbsp;html>
    <meta>
    <meta>
    <meta dom api>
    <title>猜数字</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: aliceblue;
        }
        hJavaScript DOM API 지식 공유 {
            width: JavaScript DOM API 지식 공유00%;
            height: JavaScript DOM API 지식 공유0px;
            text-align: center;
            line-height: JavaScript DOM API 지식 공유0px;
            color: blueviolet;
            margin: JavaScript DOM API 지식 공유0px 0;
        }
        .guessp {
            width: JavaScript DOM API 지식 공유00%;
            height: JavaScript DOM API 지식 공유0px;
            text-align: center;
            display: flex;
            justify-content: center;
        }
        .guessp #bJavaScript DOM API 지식 공유{
            height: JavaScript DOM API 지식 공유0px;
            width: JavaScript DOM API 지식 공유0%;
            background-color: rgb(JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유);
            color: aliceblue;
            border: 0cm;
            border-radius: JavaScript DOM API 지식 공유px;
        }
        .guessp #bJavaScript DOM API 지식 공유:active{
            background-color: gray;
        }
        .guessp #guess{
            width: JavaScript DOM API 지식 공유0%;
            height: JavaScript DOM API 지식 공유0px;
            border: JavaScript DOM API 지식 공유px solid rgb(JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유);
            border-radius: JavaScript DOM API 지식 공유px;
            text-indent: 0.6em;
            outline: none;
        }
        .guessp #number{
            width: JavaScript DOM API 지식 공유0%;
            text-align: right;
        }
        .guessp #in {
            width: 70%;
            margin-left: JavaScript DOM API 지식 공유%;
            text-align: left;
        }
        .cnt, .ret{
            width: JavaScript DOM API 지식 공유00%;
            height: JavaScript DOM API 지식 공유0px;
            text-align: center;
        }
        .rev{
            width: JavaScript DOM API 지식 공유00%;
            height: JavaScript DOM API 지식 공유0px;
            text-align: center;
        }
        .rev #bJavaScript DOM API 지식 공유{
            margin: JavaScript DOM API 지식 공유px;
            height: JavaScript DOM API 지식 공유0px;
            width: JavaScript DOM API 지식 공유00px;
            background-color: rgb(JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유00,JavaScript DOM API 지식 공유00);
            color: aliceblue;
            border: 0cm;
            border-radius: JavaScript DOM API 지식 공유px;
        }
        .rev #bJavaScript DOM API 지식 공유:active{
            background-color: gray;
        }
        .ret, .cnt{
            width: JavaScript DOM API 지식 공유00%;
            height: JavaScript DOM API 지식 공유0px;
            display: flex;
            justify-content:center;
        }
        .guessp #messr, .guessp #messc {
            width: JavaScript DOM API 지식 공유0%;
            text-align: right;
        }
        .guessp #result, .guessp #count{
            width: 70%;
            text-align: left;
            margin-left: JavaScript DOM API 지식 공유%;
        }


    </style>

    <hjavascript dom api>猜数字游戏</hjavascript>DOM API 지식 공유>
    <p>
        <span>要猜的数字:</span>
        <span>
            <input dom api>
            <button dom api>我就要猜它</button>
        </span>
    </p>
    
    <p>
        <span>结果:</span>
        <span>你还没有猜哦！</span>
    </p>
    <p>
        <span>次数:</span>
        <span>0</span>
    </p>
    <p>
        <button dom api>
            开始/重新开始猜数字        </button>
    </p>


    <script>

    </script>

로그인 후 복사

实际JavaScript DOM API 지식 공유：

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유JavaScript DOM API 지식 공유DOM API 지식 공유>

目标页面

JavaScript DOM API 지식 공유.JavaScript DOM API 지식 공유

JavaScriptJavaScript DOM API 지식 공유：

//获取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "温柔地", "随便地", "紧张地", "幽默地", "滑稽地", "开心地", ""];//用户点击表白将表白记录显示在表白按钮下面let record = [];let i = 0;loveBtn.onclick = function() {
    //JavaScript DOM API 지식 공유.获取表白内容
    let inputs = document.querySelectorAll("input");
    let from = inputs[0].value;
    let to = inputs[JavaScript DOM API 지식 공유].value;
    let message = inputs[JavaScript DOM API 지식 공유].value;
    //JavaScript DOM API 지식 공유.如果有一项内天为空，不处理
    if (from == JavaScript DOM API 지식 공유9;JavaScript DOM API 지식 공유9; || to == JavaScript DOM API 지식 공유9;JavaScript DOM API 지식 공유9; || message == JavaScript DOM API 지식 공유9;JavaScript DOM API 지식 공유9;) {
        return;
    }
    //JavaScript DOM API 지식 공유.汇总表白语言
    let n = adv.length;
    let index = (Math.floor(Math.random() * JavaScript DOM API 지식 공유000) + JavaScript DOM API 지식 공유) % n;
    let romAdv = adv[index];
    let loveMess = from + romAdv + "对" + to + "说" + message;
    record[i] = "留言" + (i+JavaScript DOM API 지식 공유) + ":" + loveMess;
    //JavaScript DOM API 지식 공유.新建结点，插入表白记录
    let p = document.createElement("p");
    p.innerHTML = record[i];
    p.className = JavaScript DOM API 지식 공유9;ohJavaScript DOM API 지식 공유9;;
    let container = document.querySelector(".container");
    container.appendChild(p);
    i++;
    //JavaScript DOM API 지식 공유.表白完，清空输入框
    for (let i = 0; i 页面JavaScript DOM API 지식 공유：
nbsp;html>
    
    
    
    JavaScript DOM API 지식 공유
    
    
        "真的是"JavaScript DOM API 지식 공유DOM API 지식 공유>
        
输入后点击提交, 会将信息显示在表白按钮下方
        这是一个正经的JavaScript DOM API 지식 공유，这真的不是一个JavaScript DOM API 지식 공유
        
        
            是谁:
            <input>
        
        
            向谁:
            <input>
        
        
            说:
            <input>
        
        
            
        
    
    
    
로그인 후 복사