javasctipt之DOM知识点
一：DOM节点
子节点：childNodes
父节点：parentNode
offsetPrent
二：元素属性操作
方式一：xxx.style.xxx
方式二：xxx.style["xxx"]
方式三：Dom方式
（一）获取子节点的数量 chileNodes.length
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节点</title> <script> window.onload = function(){ var oUl = document.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
alert(oUl.childNodes.length) }
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
错误：明明是5个，结果是11个。
原因是：chrome浏览器将li前面和后面的空白也当成节点，进行计算，因为 xxxxx是文本节点，<li>xxx</li>是元素节点
解决办法：使用children就行：oUl.childNodes.length 改为 oUl.children.length
案例：通过js给下面的li设置颜色，红绿相间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节点</title> <script> window.onload = function(){ var oUl = document.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li"); for(var i=0;i<oUl.children.length;i++){
if(i%2===0){
oUl.children[i].style.backgroundColor = "red";
}else{
oUl.children[i].style.backgroundColor = "green";
}
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
nodeType可以告诉节点的类型 如果非要使用childNode进行设置，可以增加判断，if (nodeType==1) 表示元素节点，通过这个可以过滤节点
（二）获取父节点
案例：循环设置点击事件，隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节点</title> <script> window.onload = function(){ var oUl = document.getElementsByTagName("ul")[0];
// [object HTMLBodyElement]
// alert(oUl.parentNode)
// var oLi = oUl.getElementsByTagName("li")
// [object HTMLUListElement]
// alert(oLi[0].parentNode)
var oA = oUl.getElementsByTagName("a")
for(var i=0;i<oA.length;i++){
oA[i].onclick = function(){
// 这种情况就无法隐藏，因为是事件，this就代表当前点击的元素，谁点击，发生了事件，this就代表谁
// oA[i].parentNode.style.display = "none"
this.parentNode.style.display = "none"
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="#">隐藏1</a></li>
<li><a href="#">隐藏2</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏4</a></li>
<li><a href="#">隐藏5</a></li>
</ul>
</body>
</html>
补充css知识点：绝对定位的元素，根据谁定位，根据有定位的父级元素，如果最近的父级没有定位，一直往上找，直到找到有定位的父级为止。
举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父级定位</title> <style> #div1{
width: 200px;
height: 200px;
margin: 100px;
background-color: gray;
}
#div2{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:50px;
left:50px;
} </style>
</head>
<body>
<div id="div1">
<div id="div2"> </div>
</div>
</body>
</html>因为：父级div1没有定位，所以div2就找到了body,不随div1的移动而移动
给父级加上相对定位
<style>
#div1{
width: 200px;
height: 200px;
margin: 100px;
background-color: gray;
position: relative;
}
#div2{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
结论：父相子随，父节点是相对定位，子节点会跟随父节点，相对父节点进行绝对定位
（三）setAttriuute设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Attribute设置属性</title> <script> window.onload = function(){ var oIput = document.getElementById("inp")
var oBtn = document.getElementById("btn") oBtn.onclick = function(){
// 参数一，属性名，参数二，属性值
oIput.setAttribute("value","这是点击设置的参数")
}
}
</script> </head>
<body>
<input type="text" value="" id="inp">
<input type="button" id="btn" value="点击">
</body>
</html>
getAttribute（属性名）， removeAttribute（属性名）
（四）className选择元素：批量化操纵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>className设置属性</title>
<script> window.onload = function(){
var oUl = document.getElementsByTagName("ul")[0]
var oLi = document.getElementsByTagName("li")
for(var i=0;i<oLi.length;i++){
if(oLi[i].className == "box"){
oLi[i].style.backgroundColor = "red";
}
}
}
</script> </head>
<body>
<ul>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
</html>
但是有一个问题：如果考虑代码的复用性，上面的代码可以修改为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>className设置属性</title>
<script> function getclassname(oParment,className){
var aElement = oParment.getElementsByTagName("*");
var aLi = new Array();
for(var i=0;i<aElement.length;i++){
if(aElement[i].className==className){
aLi.push(aElement[i]);
}
}
return aLi
}
window.onload = function(){ var oUl = document.getElementById("u1")
var aBox = getclassname(oUl,"box")
alert(aBox.length)
for(var i=0;i<aBox.length;i++){
aBox[i].style.backgroundColor = "green"；
# 两种形式都可以
aBox[i].setAttribute("style","background:green")
}
}
</script>
</head>
<body>
<ul id="u1">
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
</html>
# TODO
javasctipt之DOM知识点的更多相关文章
- Javascript + Dom知识点总结
Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...
- DOM知识点总结
今天简单整理了一下js三部曲之DOM部分的内容,二话不说先上笔记: 1.什么是DOM? Document Object Model,即文档对象模型,它是让JavaScript能够操作html和xml的 ...
- HTML DOM 知识点整理（一）—— Document对象
一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...
- HTML DOM知识点补充：
DOM Console 控制台对象提供了浏览器的debug的方法支持. 常用的:console.log(). ⚠️coffeescript中,这个方法不加括号. DOM Document 当一个HTM ...
- DOM 知识点梳理（笔记）
1998年10月DOM1级规范成为了W3C的推荐标准,为基本的文档结构及查询提供了接口. 一.Node类型 每个节点都有个nodeType属性,表明了节点的类型.共有12种类型: 元素节点 ...
- 前端DOM知识点
DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...
- XML DOM 知识点
第一部分[DOM基础] DOM介绍: 1.什么是 HTML DOM? HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口). 2.什么是 XML DOM? XML DO ...
- 《对象及DOM知识点及其应用1》
1.图片间的来回切换用if{}else{}; <超链接方式的切换图片(常用)>如:<a href="../images1/1-small.jpg" id=&quo ...
- JS DOM与BOM
DOM知识点 [DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js ...
随机推荐
- typeScript入门配置
typeScript是有微软开发的一款开源的编程语言. TypeScript是JavaScript的一个超集,从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始.可以使用现有的Java ...
- Opencv-python3.3版本安装
因为目前为止(2019.11.17)opencv最新版本为4.1,因此直接pip install opencv-python的话,无法安装想要的版本(老师推荐3.X) 上清华镜像查找opencv-py ...
- property自己实现
# 先回顾一下 class Room: def __init__(self,name,width,length): self.name = name self.width = width self.l ...
- 论文阅读 | BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain
BadNets: 识别机器学习模型供应链中的漏洞 摘要 基于深度学习的技术已经在各种各样的识别和分类任务上取得了最先进的性能.然而,这些网络通常训练起来非常昂贵,需要在许多gpu上进行数周的计算;因此 ...
- 4 基于优化的攻击——CW
CW攻击原论文地址——https://arxiv.org/pdf/1608.04644.pdf 1.CW攻击的原理 CW攻击是一种基于优化的攻击,攻击的名称是两个作者的首字母.首先还是贴出攻击算法的公 ...
- HP UNIX弱口令
这种弱口令直接丢进kali linu里用john --wordlist=zd.txt 加上文件
- poj1050-最大子矩阵（dp）
链接:http://poj.org/problem?id=1050 题意:给定n*n的矩阵,求和最大的子矩阵. 思路:我们将二维矩阵降维至一维,即将第i行到第j行的所有列压缩成一行,我们可以在线性时间 ...
- skiplist(跳表)的原理及JAVA实现
前记 最近在看Redis,之间就尝试用sortedSet用在实现排行榜的项目,那么sortedSet底层是什么结构呢? "Redis sorted set的内部使用HashMap和跳跃表(S ...
- linux shell脚本中使用expect（脚本打开新终端自动远程连接顺便输一点指令）（巨坑）
放弃吧 我找了六个小时都没找到可以用的方案(指标题括号里的内容) 给个曲线救国的方法: 现把expect脚本写成一个文件 在另一个shell脚本中调用
- Python 入门 之 类成员
Python 入门 之 类成员 1.类的私有成员: 私有: 只能自己拥有 以 __ 开头就是私有内容 对于每一个类的成员而言都有两种形式: - 公有成员,在任何地方都能访问 - 私有成员,只有在类的内 ...