javascript初探（三）------DOM

chuck-Gemini

已于 2023-03-13 22:21:04 修改

阅读量154

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2021-03-04 22:48:58 首次发布

本文链接：https://blog.csdn.net/chucksun0426/article/details/114249685

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、概述

DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 模型被构造为对象的树
节点图示
- 节点定义（重要）：HTML 文档中的所有内容都是节点，整个文档是一个文档节点
- 节点关系：节点彼此有层级关系，用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系

二、示例模板

代码

<html>

	<head>
	    <title>test</title>
	    <script type="text/javascript">
	        window.onload = function() {
				// 以下测试代码都是写在这里
	        }
	    </script>
        <style type="text/css">
	        #city {
	            width: 100px;
	            height: 100px;
	            background-color: red;
	        }
	    </style>
	</head>

	<body>
	    <ul id="city">
	        <li class="location">北京</li>
	        <li>上海</li>
	        <li>广州</li>
	    </ul>
        <form action="demo.asp" method="get" id="formid">
	         性别: 
	         <input type="radio" name="gender" value="male" /> 男 
	         <input type="radio" name="gender" value="female" />女<br>
	         <input id="sub" type="submit" value="Submit" />
	     </form>
	</body>

</html>

效果如下图

三、节点操作

3.1 元素节点

3.1.1 查

document对象查找

// 方法一：
// 通过ID获取元素：获取<ul>...</ul>这个元素节点(见2.1图)
const ul_id = document.getElementById("city");
// 此方法获得[object HTMLUListElement],单个元素节点
// alert(ul_id);

// 方法二：
// 通过标签名获取元素：返回的是一个数组，即使只有一个元素节点，[object HTMLCollection]
const form_tag_list = document.getElementsByTagName("form");
// 注意数组的调用方法，此处[0]选择了form元素节点
// alert(form_tag_list[0]);

// 方法三：
// 通过元素名属性获取元素：返回的是一个数组，即使只有一个元素节点，[object HTMLCollection]
const class_list = document.getElementsByClassName("location");            
// 注意数组的调用方法
// alert(class_list[0])

非document对象查找

// 方法一
const ul_id = document.getElementById("city");
// 通用查询：将ul的所有子元素节点组成的数组给cns，即是3个li元素节点
// 会读取到<br>
const cns = ul_id.children;
// 子元素数组长度：输出3
alert(cns.length);
// 子元素数组首元素：输出[object HTMLLIElement]
alert(cns[0]);
// 数组的父元素：即ul元素节点，输出[object HTMLUListElement]
alert(cns[2].parentNode)

// 方法二：
const ul_id = document.getElementById("city");
// 标签名查询：返回的是一个数组，即使只有一个元素节点
const li_list = ul_id .getElementsByTagName("li");
// 注意数组的调用方法，此处[0]选择了li元素节点
// alert(li_list[0]);

//方法三：
const ul_id = document.getElementById("city");
// 类名查询：返回的是一个数组，即使只有一个元素节点
const li_list = ul_id.getElementsByClassName("location");
// 注意数组的调用方法，此处[0]选择了li元素节点
// alert(li_list[0]);

查操作：样式选择器法（重点）

 // 仅返回第一个查询到的元素节点
 const li_1 = document.querySelector("#city li");
 // alert(li_1.innerHTML);

 // 返回符合条件的元素节点列表，即使只有一个
 const li_2 = document.querySelectorAll("#city li");
 // alert(li_2[0].innerHTML);

id名 #nav 
标签名 div
类名 .warning

#log span // id为log的后代元素中所有span的元素
#log>span // id为log的子元素中所有span的元素
body>h1:first-child	//body标签的子元素中第一个h1标签元素
div, #log // 所有div元素，以及ID为log的元素

3.1.2 增

代码

// 1、新增元素节点,还可以是li,ul,p,input...
const btn=document.createElement("button");
// 2、新增文本节点
btn.innerHTML = "<strong>点击我</strong>"; 

// 3、将元素节点挂载到DOM树上，必须是父元素节点调用方法
// 在ul_id末尾追加
const ul_id = document.getElementById("city");
ul_id.appendChild(btn);
// 4、在任意位置插入
ul_id.insertBefore(btn, ul_id.children[0]);

3.1.3 改删

代码

// 新增p标签
const pnode = document.createElement("p");
pnode.innerHTML = "<i>西藏</i>";
// 替换操作：父元素调用方法，（待更新元素节点，原元素节点）
pnode.parentNode.replaceChild(pnode, ulitem.children[0]);
// 删除操作：父元素调用方法，（待删除元素节点）
pnode.parentNode.removeChild(ulitem.children[1]);

3.2 属性节点_常规

3.2.1 增

代码

// 创建属性节点
const attr = document.createAttribute("class");
const ul_id = document.getElementById("city");
// 将属性节点挂载到已存在的元素节点，若有则替换，无则新增
ul_id.setAttribute("class","democlass");

3.2.2 查

代码

// 类名法获取元素节点
const newItem = document.getElementsByClassName("democlass")[0];   
// 存在这个属性返回true
let has_attr = newItem.hasAttribute("onclick");
// 返回属性列表，这里取列表首元素
let arrt_list = newItem.attributes[0];
// 返回第一个属性名字:class
alert(arrt_list.name)
// 返回第一个属性值:
alert(arrt_list.value)

3.2.3 改

代码

// 类名法获取元素节点
const newItem = document.getElementsByClassName("democlass")[0];   
// 修改元素节点的值，注意元素节点的属性名写法
newItem.className = "democlass_1";
// 修改元素节点的文字节点，也可用innerHTML
newItem.innerText = "再点我";

3.2.4 删

代码

// 类名法获取元素节点
const newItem = document.getElementsByClassName("democlass")[0];  
// 通过属性名获取元素节点的属性节点
let attr = newItem.getAttribute("class");
// 元素节点调用方法删除属性节点
newItem.removeAttribute(attr);

3.3 属性节点_样式

代码

const city = document.getElementById("city");

// 读操作
// 内联样式读取：无法读取样式表中样式，如下输出空
alert(city.style.width)
// 获取当前显示的样式列表：只读不可改，返回100px，
// null可为':before'、':after'
alert(getComputedStyle(city, null).height)

// 写操作
// 添加内联样式：若删除则恢复默认的#city样式
// 优先级最高（除了!important）
city.style.width = "300px";
// 样式属性值不能有横杠“-”，需用驼峰表示法
city.style.backgroundColor = "yellow";

样式常用属性
- 元素boder内边距
- 元素border外边距
- 滚动区域被隐藏页面（还有scrollLeft）
- 子盒子顶距父盒子顶距离
其他属性（待补充）

属性释义
offsetLeft 当前元素相对于其定位父元素的水平偏移量
offsetTop 当前元素相对于其定位父元素的垂直偏移量

属性	释义
offsetLeft	当前元素相对于其定位父元素的水平偏移量
offsetTop	当前元素相对于其定位父元素的垂直偏移量

上一篇：javascript初探（二）------对象及方法
 下一篇：javascript初探（四）------事件对象

chuck-Gemini

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript初探（三）------DOM

目录一、概述二、获取元素一、概述DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）HTML DOM 模型被构造为对象的树二、获取元素通过 id获取元素：let x=document.getElementById("btn");，如<button id="btn">按钮</button>，精确查找通过标签名查找：let x_list=document.getElementsByTagName("div");，如<d
复制链接

扫一扫

专栏目录