JS -- DOM（文档对象模型）

认识DOM（文档对象模型）

DOM（Document Object Model）：定义访问和处理HTML文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM简介</title>

</head>

<body>

    <h2>

    <a href="http://www.baidu.com">JavaScript DOM</a>

    </h2>

    <p>哒哒哒</p>

    <ul>

        <li>JavaScript</li>

        <li>DOM简介</li>

    </ul>

</body>

</html>

将HTML代码分解为DOM节点层次图：

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点：元素属性，如<a>标签的链接属性href="http://www.baidu.com"。

一、通过ID获取元素

语法：

document.getElementById("idName");

结果:null或[object HTMLParagraphElement]

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM简介</title>

</head>

<body>

    <h2>

    <a href="http://www.baidu.com">JavaScript DOM</a>

    </h2>

    <!--设置P标签的id-->

    <p id="con">哒哒哒</p>

    <script type="text/javascript">

    //通过ID获取元素

    var mychar=document.getElementById("con")

    document.write("输出："+mychar)

    </script>

</body>

</html>

运行结果：

JavaScript DOM

哒哒哒

输出：[object HTMLParagraphElement]

二、通过innerHTML属性修改文本节点

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法：

Object.innerHTML="newtext"

其中Object为获取的元素对象，如通过document.getElementById获取的元素。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM简介</title>

</head>

<body>

    <h2>

    <a href="http://www.baidu.com">JavaScript DOM</a>

    </h2>

    <!--设置P标签的id-->

    <p id="con">哒哒哒哒哒哒</p>

    <script type="text/javascript">

    //通过ID获取元素

    var mychar=document.getElementById("con")

    document.write("修改前："+mychar.innerHTML+"<br>")    //利用<br>实现换行

    mychar.innerHTML="尽管科琳双胞胎作为班长"    //通过innerHTML属性来修改元素内容

    document.write("修改后："+mychar.innerHTML)

    </script>

</body>

</html>

运行效果：

JavaScript DOM

尽管科琳双胞胎作为班长

修改前：哒哒哒哒哒哒
修改后：尽管科琳双胞胎作为班长

三、控制类名（className属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM简介</title>

<style type="text/css">

    .one{

        font-size: 20px;

        color: red;

    }

    .two{

        font-size: 30px;

        color: blue;

    }

    .three{

        font-size: 40px;

        color: green;

    }

</style>

</head>

<body>

    <h2>

    <a href="http://www.baidu.com">JavaScript DOM</a>

    </h2>

    <!--设置P标签的id-->

    <p id="con1" class="one">哒哒哒哒哒</p>

    <p id="con2" class="two">哈哈哈哈哈</p>

    <p id="con3" class="three">嘎嘎嘎嘎嘎</p>

    <input type="button" value="点击我，修改样式" onclick="modify()">

    <script type="text/javascript">

    var mychar=document.getElementById("con1")

    function modify(){

        //通过.className属性，修改样式

        mychar.className="three"

    }

    </script>

</body>

</html>

运行效果：

四、通过Object.style.property修改元素的样式

（1）文本属性

语法：

Object.style.property="new style"

常见样本属性表：



（2）显示或隐藏 
语法：
Object.style.display=value

value取值:

值	描述
none	此元素将被隐藏
block	此元素将被显示

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM简介</title>

</head>

<body>

    <h2>

    <a href="http://www.baidu.com">JavaScript DOM</a>

    </h2>

    <!--设置P标签的id-->

    <p id="con1">哒哒哒哒哒</p>

    <p id="con2">哈哈哈哈哈</p>

    <p id="con3">嘎嘎嘎嘎嘎</p>

    <script type="text/javascript">

    //通过ID获取元素

    var mychar1=document.getElementById("con1");

    //通过Object.style.property修改元素的样式

    mychar1.style.color="red";

    mychar1.style.fontSize="20px";

    //mychar1.style.background="blue";

    //mychar1.style.width="300px";        //此处的width为背景的宽度

    //隐藏ID为con2的元素

    document.getElementById("con2").style.display="none"

    //显示ID为con3的元素

    document.getElementById("con3").style.display="block"

    </script>

</body>

</html>

运行效果：

JavaScript DOM

哒哒哒哒哒

嘎嘎嘎嘎嘎

五、getElementsByName()方法

语法：

document.getElementsByName(name)

注意：

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function getnum(){

    //通过document.getElementsByName()查找相同Name的标签

  var mynode= document.getElementsByName("myt");        ;

  alert(mynode.length);

}

</script>

</head>

<body>

<input name="myt" type="text" value="1">

<input name="myt" type="text" value="2">

<input name="myt" type="text" value="3">

<input name="myt" type="text" value="4">

<input name="myt" type="text" value="5">

<input name="myt" type="text" value="6">

<br />

<input type="button" onclick="getnum()" value="看看有几项？" />

</body>

</html>

运行效果：

区别getElementByID，getElementsByName，getElementsByTagName

<input type="checkbox" name="hobby" id="hobby1">  音乐

其中：ID为“hobby1”，name为“hobby”，tagname为“input”。

参考：https://www.imooc.com