JS学习（10）----DOM

来源：互联网发布：南京证券开户软件编辑：程序博客网时间：2024/06/04 23:36

1.DOM是什么

DOM: Document Object Model
这里写图片描述

2.DOM 方法

如前面经常使用的getElementById(“idName”);

document.getElementById("test").innerHTML = "Hello";

其中的getElementById是HTML DOM的方法，而innerHTML是HTML DOM的属性。
注：innerHTML可以改变任意html元素的内容，包括html和body。

3.Document

（1）寻找DOM元素的方法

有以下几种方法，分别是getElementById、getElementsByClassName、getElementsByTagName、getElementsByName
注：这几种方法中第一个是element，而后面的几种的element用的都是复数。
(A)getElementById
因为每一个元素的id都是唯一的，所以element是唯一的

document.getElementById("test")

(B)getElementsByName
顾名思义，这个方法时通过name属性来获取HTML DOM中对应的元素，因为不同的元素名字可以相同，所以elements用的是复数

<div name="docName" id="id1"></div><div name="docName" id="id2"></div>document.getElementsByName("docName");

可以通过document.getElementByName(“docName”)[0]或者是document.getElementByName(“docName”)[1]来单独访问一个元素。
(C)getElementsByClassName(className)
通过class的名字来获取元素。

document.getElementsByClassName("className");

(D)getElementsByTagName(TagName)

document.getElementsByTagName("p");

(E)querySelectorAll();

var x = document.querySelectorAll("p.test");var str = x[0].innerHTML + x[1].innerHTML;

(F)通过获取对象来得到元素element

//  注:此代码来自：https://www.w3schools.com<!DOCTYPE html><html><body><form id="frm1" action="/action_page.php">  First name: <input type="text" name="fname" value="Donald"><br>  Last name: <input type="text" name="lname" value="Duck"><br><br>  <input type="submit" value="Submit"></form> <p>Click "Try it" to display the value of each element in the form.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() {    var x = document.forms["frm1"];    var text = "";    var i;    for (i = 0; i < x.length ;i++) {    // 获取到的三个元素分别对应三个input        text += x.elements[i].value + "<br>";    }    document.getElementById("demo").innerHTML = text;}</script></body></html>

（2）改变元素的内容

这里写图片描述
可以改变元素对应属性的值，如下栗子：

<img id="image" src="test.jpg">

document.getElementById("image").src = "bird.jpg";

（3）DOM添加和删除节点

这里写图片描述
（A）createElement
常常与appendChild一起使用，因为添加之后需要将节点加到html中。

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head><body>    <p>点击按钮创建新的button元素</p>    <button id="clickBtn">Click Me</button>    <script src="script.js"></script></body></html>

/* * @Author: Lin* @Date:   2017-07-23 12:00:09* @Last Modified by:   Lin* @Last Modified time: 2017-07-23 12:03:25*/document.getElementById("clickBtn").onclick = function() {    var newBtn = document.createElement("input");    newBtn.type = "button";    newBtn.value = "newButton";    document.body.appendChild(newBtn);};

每次点击button，就会增加新的button。
（B）removeChild

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head><body>    <ul id="mlist">        <li>Apple</li>        <li>Pear</li>        <li>Watermelon</li>    </ul    <button id="btn" onclick="myFunction()">Click Me</button>    <p id="test"></p>    <script src="script.js"></script></body></html>

function myFunction() {    var myList = document.getElementById("mlist");    myList.removeChild(myList.childNodes[0]);}

注：有个问题还没有搞懂，上面的这个代码执行后需要点击两次button显示界面中才会减少一个li，但是下面的这份代码却不一样，只需要点击一次就能够减少一个li。希望也欢迎理解其中不同的朋友给我留言。

<!DOCTYPE html><html><body>  <ul id="myList">        <li>Coffee</li>        <li>Tea</li>        <li>Milk</li>    </ul>    <p id="demo">点击按钮来删除列表中的首个项目。</p>    <button onclick="myFunction()">试一下</button>    <script>        function myFunction()        {            var list=document.getElementById("myList");            list.removeChild(list.childNodes[0]);        }    </script></body></html>

（4）添加事件处理器

document.getElementById("btn").onclick = myFunction() {......};

通过在js中添加事件处理器而不是直接在html中对事件进行处理，可以有效地将html、css和js分离开来，增强代码的可读性。

阅读全文

0 0