Python学习笔记：5.2.7 javascript之DOM对象

最新推荐文章于 2023-09-15 14:00:00 发布

WinvenChang

最新推荐文章于 2023-09-15 14:00:00 发布

阅读量280

点赞数

分类专栏： Python全栈工程师学习笔记文章标签： javascript DOM

本文链接：https://blog.csdn.net/u014257214/article/details/104213802

版权

本文是Python全栈工程师课程的前端基础笔记，主要讲解JavaScript中的DOM对象，包括document选择器、元素节点操作、事件处理及事件代理。介绍了getElementById、getElementsByTagName等选择器，以及动态创建元素、删除和修改节点的方法。同时，详细阐述了事件的概念，冒泡和捕获机制，以及addEventListener的使用。

摘要由CSDN通过智能技术生成

本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！

一、课程目标

document对象
dom选择器
dom操作
dom事件

二、详情解读

2.1.document对象

在之前，html文档就是由一组标签组成的文档，但是在javascript中，html被被视为由一系列节点通过层级关系组合在一起，并且可以通过javascript来操作这些节点
1.document相关属性
2.document相关方法
3.dom选择器

在javascript中，document对象代表整个网页文档

属性/方法	说明
document.documentElement	获取整个html的文档内容
document.body	获取整个body标签的内容
document.title	获取文档title标签的内容
document.location	相当于window.location，document.location==window.location返回true
document.domain	网站所处的域名，比如：127.0.0.1
document.URL	相当于location.href，用来获取网页的url链接
document.write	在页面中输出内容
document.writeln	每次输出后增加以个"\n",在网页里由于换行需要<br>标签才能换行，所以这里看上去只是多了个空格（不可见字符）

var html = document.documentElement 

// <body>：获取整个body标签的内容
var body = document.body

// <title>：获取文档title标签的内容
var title = document.title 

// document.location == window.location 返回true
document.location
// 网站所处的域名：比如127.0.0.1
document.domain
// 相当于location.href，用来获取网页的url链接
document.URL

// 在页面中输出内容
document.write()
//writeln会在每次输出后增加以个"\n",在网页里由于换行需要<br>
//标签才能换行，所以这里看上去只是多了个空格（不可见字符）
document.writeln() 

for (i in "string"){
   
   document.writeln( "string"[i])
}

2.1.1.dom选择器

1.根据id选择：document.getElementById(id)
2.根据元素标签选择：document.getElementsByTagName(tagName)
3.document.forms：返回一个集合 (一个HTMLCollection对象),包含了当前文档中的所有form元素
4.document.images：返回当前文档中所有img图片的数组
5.document.links：返回当前文档中所有a链接的数组

html5支持的选择器：

1.根据class名称：document.getElementsByClassName(className)
2.根据name属性：document.getElementsByName(name)
3.选择单个元素：document.querySelector(css选择器)
4.选择全部元素：document.qurySelectorAll(css选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
    width:50px;}
		</style>
	</head>
	<body>
		<a href="./link1.html" name="link1" class="nav" id="a1">link1</a>
		<a href="./link2.html" name="link2" class="nav" id="a2">link2</a>
		<div class="div1 red" id="div1" name="div1">
			
			<img src="" id="img1" class="thumb" name="img1">
			<form action="" method="post" name="form1">
				
				<input type="submit" value="提交"/>
			</form>
		</div>
		
		<div class="div2 red" id="div2">
			<img src="" id="img2" class="thumb">
			<form action="" method="post" name="form2">
				<input type="text" name="username" id="" value="" />
				<input type="password" name="password" id="" value="" />
				<input type="submit" value="提交"/>
			</form>
		</div>
		<script type="text/javascript">	
		   //根据元素标签选择
		   div = document.getElementsByTagName("div")
		   img = document.getElementsByTagName("img")
		   forms = document.getElementsByTagName("form")
		   input = document.getElementsByTagName("input")

运行结果（根据元素标签选择：）
在这里插入图片描述

		   //根据id选择
		  div1 = document.getElementById("div1")
		  div2 = document.getElementById("div2")

运行结果（根据ID选择获取元素：）
在这里插入图片描述

		   //根据class名称
		   // 返回一组		
		   div1 = document.getElementsByClassName("div1")
		   redDiv = document.getElementsByClassName("red")

运行结果（根据class名称获取元素：）
在这里插入图片描述

		   //根据name属性
		   // 返回NodeList
		   username = document.getElementsByName("username")
		   password = document.getElementsByName("password")

运行结果（根据name属性获取元素：）
在这里插入图片描述

		   // form, img,link专用选择语法		   
		   forms = document.forms
		   console.log(forms['form1'])
		   console.log(document.form1)
		   imgs = document.images
		   console.log(imgs['img1'])
		   console.log(document.img1)
		   links = document.links
		   console.log(links[0])
		   console.log(links['a1'])
		   console.log(links['link1'])

运行结果（form, img,link专用选择语法：）
在这里插入图片描述

		   // html5支持的选择器 API规范
		   //选择单个元素
		   document.querySelector(css选择器)
		  
		   element = document.querySelector(".red")

运行结果（querySeletor(class选择器）：）
在这里插入图片描述

		   // id选择器
		   element = document.querySelector("#div1")
		   // 选择div1下的 img
		   // element = document.querySelector("#div1>img")

运行结果（querySeletor(id选择器）：）
在这里插入图片描述

		   /* 
		   选择全部元素
		   document.querySelectorAll(css选择器)
		   返回NodeList对象，包含一个forEach遍历方法
		   */
		   elements = document.querySelectorAll(".red")
		   //divs = document.querySelectorAll("div")

运行结果（querySeletorAll(id选择器）：）
在这里插入图片描述

// querySelectorAll 返回的是静态的NodeList，当页面节点变化时，这个NodeList还是原来的元素，不会变化
// dom的getElements系列返回的是动态的节点集合HTMLCollection，当页面变化时，节点集合会跟着改变。因此会消耗资源
		   q_divs = document.querySelectorAll("div")
		   d_divs = document.getElementsByTagName("div")
		   console.log(q_divs)
		   console.log(d_divs)

在这里插入图片描述

		   function addDiv(){
   
			   new_div = document.createElement("div")
			   new_div.className = "red"
			   new_div.id =

最低0.47元/天解锁文章

WinvenChang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录