JavaScript：dom心得

最新推荐文章于 2022-05-27 21:43:57 发布

hejia729371286

最新推荐文章于 2022-05-27 21:43:57 发布

阅读量638

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/hejia729371286/article/details/50412411

版权

js 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了HTML DOM，它是HTML的标准对象模型和编程接口，允许通过JavaScript访问、修改、添加或删除HTML元素。内容包括通过getElementById(), getElementsByTagName(), getElementsByClassName()方法访问节点，以及通过元素节点读写属性值和获取子节点的方法。" 122220353,9826393,STC15单片机串口通信：收发单个字符实战,"['自动化', '单片机', '串口通信']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

二、 HTML DOM 节点

因此：通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

正常的JavaScript的写法有如下三种：

1、这种方法使用于js不是很多得情况下使用，否则代码不好看，不好调试

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- HTML 代码和 JS 代码耦合在一起. -->
	<button οnclick="alert('helloworld...');">ClickMe</button>
	
</body>
</html>

2、由于html文档是从上到下编译的，所以如果把JavaScript放在head里面的话，可能执行时获取不到html里的对象属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
	
	<button>ClickMe</button>
	
</body>
</html>

<!-- 
	在整个 HTML 文档被加载后, 获取其中的节点. 
	把  script 节点放在 html 文档的最后 
	但不符合些 JS 代码的习惯. 
-->
<script type="text/javascript">
	
	//1. 获取 button
	var btns = document.getElementsByTagName("button");
	alert(btns.length);
	
	//2. 为 button 添加 onclick 响应函数
	btns[0].onclick = function(){
		alert("helloworld!!");
	}

</script>

例如：

<!DOCTYPE html>
<html>
<body>


<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>
</body>
</html>

结果为：

如果是这样的：

<!DOCTYPE html>
<html>
<body>
<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>


</body>
</html>

结果是：

3、

由于html文本在加载的时候会先调用window.οnlοad=function(){}方法，所以一般推荐的JavaScript的写法是放在这个方法函数里面执行，如下操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//window.onload 事件在整个 HTML 文档被完全加载后出发执行. 
	//所以在其中可以获取到 HTML 文档的任何元素. 
	window.onload = function(){
		//方法写在这里面
	}
</script>
</head>
<body>
	
	<button>ClickMe</button>
	
</body>
</html>

访问ＨＴＭＬ元素（节点）的三种方法：

通过使用 getElementById() 方法

如：

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

通过使用 getElementsByTagName() 方法，其返回的是集合对象，所以你可以利用根据标签名获取指定节点名字的数组，数组对象length属性是可以获取数组的长度。

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML);
</script>

这个属性还有个好处是：可以在跟getElementById() 结合使用，先通过getElementById() 获取指定id对象，然后在这个id对象里进行获取指定标签名的所有元素

<p>Hello World!</p>

<div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script>

通过使用 getElementsByClassName() 方法注释： getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

例如：document.getElementsByClassName("intro");

读写属性节点：通过元素节点的方式获取属性值和设置属性值

属性节点即为某一个指定的元素节点的属性

//1. 先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2. 再读取指定属性的值
alert(nameNode.value);
//3. 设置指定的属性的值.
nameNode.value = "dom";

获取元素节点的子节点

1、childNodes 属性获取全部的子节点，但该方法不实用，因为如果要获取指定的节点的指定子节点的集合，可以直接调用元素节点的getElementsByTagName（）方法获取

2、firstChild属性获取第一个子节点

3、lastChild属性获取最后一个子节点

//3. 获取 #city 节点的所有 li 子节点.
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

//4. 获取指定节点的第一个子节点和最后一个子节点.
alert(cityNode.firstChild);
alert(cityNode.lastChild);

节点的类型：元素节点，属性节点，文本节点

//通常情况下，操作属性节点直接通过“元素节点.属性名”的方式来读写属性值

	//关于节点的属性: nodeType, nodeName, nodeValue
			//在文档中, 任何一个节点都有这 3 个属性
			//而 id, name, value 是具体节点的属性.

//1. 元素节点的这 3 个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType); //元素节点: 1
alert(bjNode.nodeName); //节点名: li
alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null

//2. 属性节点
var nameAttr = document.getElementById("name")
.getAttributeNode("name");
alert(nameAttr.nodeType); //属性节点: 2
alert(nameAttr.nodeName); //属性节点的节点名: 属性名
alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值

//3. 文本节点:
var textNode = bjNode.firstChild;
alert(textNode.nodeType); //文本节点: 0
alert(textNode.nodeName); //节点名: #text
alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.

//nodeType、nodeName 是只读的.
//而 nodeValue 是可以被改变的。
//以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.

例如：

<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		name: <input type="text" name="username" 
			id="name" value="atguigu"/>

属性节点：

一般情况下不单独获取属性节点，而是通过元素节点，属性名的方式来读写属性值

综上所述：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">

        //需求: 点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型";
        //     检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
        //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点

        //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.


        window.onload = function(){

            function ShowNodes(liNode){
                alert("^_^#" + liNode.firstChild.nodeValue);
            }
            var liNodes = document.getElementsByTagName("li");
            for(var i = 0;i<liNodes.length;i++){
                liNodes[i].onclick = function(){
                    ShowNodes(this);
                }
            }
            //1. 获取 #submit 对应的按钮 submitBtn
            var submit = document.getElementById("submit");

            //2. 为 submitBtn 添加 onclick 响应函数
            submit.onclick = function(){

                //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
                //4.1 选择所有的 name="type" 的节点 types
                var types = document.getElementsByName("type");

                //4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
                //有一个 type 被选中了: 通过  if(元素节点.属性名) 来判断某一个元素节点是否有
                //该属性.
                var typeVal = null;

                for(var i = 0; i < types.length; i++){
                    if(types[i].checked){
                        typeVal = types[i].value;

                        break;
                    }
                }

                //4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
                //return false
                if(typeVal == null){
                    alert("请选择类型");
                    return false;
                }

                //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
                var nameEle = document.getElementsByName("name")[0];
                var nameVal = nameEle.value;

                //6. 去除 nameVal 的前后空格.
                var reg = /^\s*|\s*$/g;
                nameVal = nameVal.replace(reg,"");

                //使 name 的文本框也去除前后空格.
                nameEle.value = nameVal;
                //6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
                //方法结束: return false
                if(nameVal == ""){
                    alert("请输入内容");
                    return false;
                }
                //7. 创建 li 节点
                var liNode = document.createElement("li");
                //8. 利用 nameVal 创建文本节点
                var content = document.createTextNode(nameVal);

                //9. 把 8 加为 7 的子节点
                liNode.appendChild(content);

                //11. 为新创建的 li 添加 onclick 响应函数
                liNode.onclick = function(){
                    ShowNodes(this);
                }
                //10. 把 7 加为选择的 type 对应的 ul 的子节点
                document.getElementById(typeVal).appendChild(liNode);

                //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
                //默认行为.
                return false;
            }
        }

    </script>
</head>
<body>

<p>城市?</p>

<ul id="city">
    <li id="bj">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
</ul>

<br><br>
<p>游戏?</p>
<ul id="game">
    <li id="rl">红警</li>
    <li>实况</li>
    <li>极品飞车</li>
    <li>魔兽</li>
</ul>

<br><br>

<form action="demo1.html" name="form">

    <input type="radio" name="type" value="city">城市
    <input type="radio" name="type" value="game">游戏

     <input type="text" name="name"/>

    <input type="submit" value="Submit" id="submit"/>

</form>

</body>
</html>