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 ...
随机推荐
- meta viewport移动端自适应
参考链接:https://www.jianshu.com/p/561357d7cd7b
- 面向服务架构之RPC原理与实例
1.RPC概述 RPC(Remote Procedure Call)即远程过程调用,允许一台计算机调用另一台计算机上的程序得到结果,而代码中不需要做额外的编程,就像在本地调用一样.主要是为了应对当前互 ...
- HDU1251 统计难题（字典树|map
Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). Input输入数据的第一部分 ...
- Luogu P3810 【模板】三维偏序（陌上花开）（CDQ分治）
题目 以三维偏序为例来讲一下CDQ分治. CDQ的本质就是把一个序列分成两段,计算左边对右边的贡献,然后分治. 不过一般都是先分治到底再从下往上算,这样可以先归并再算. 比如这道题,我们先按第一维排序 ...
- SKCTF管理系统
一开始是一个简洁风的登录界面 康康注册界面 嗯...也是很简洁风呢. 那让我们来查看元素(fn+f12) 没有什么有flag的迹象呢! 那我们试一下注册一个账号 这时候我们已经有解题的线索了: 获得管 ...
- TOPK 问题
TOPK 问题 描述 如从海量数字中寻找最大的 k 个,这类问题我们称为 TOPK 问题,通常使用堆来解决: 求前 k 大,用最小堆 求前 k 小,用最大堆 例子 现有列表 [1, 2, 0, 3, ...
- SDX Instance Resource Assignment Guide 1 of 2
SDX Instance Resource Assignment Guide 1 of 2 Memory and vCPU Requirements for NetScaler VPX https:/ ...
- 第二章：排序算法 及其他 Java代码实现
目录 第二章:排序算法 及其他 Java代码实现 插入排序 归并排序 选择排序算法 冒泡排序 查找算法 习题 2.3.7 第二章:排序算法 及其他 Java代码实现 --算法导论(Introducti ...
- python中字符串格式化的意义（化妆）
格式 描述%% 百分号标记 #就是输出一个%%c 字符及其ASCII码%s 字符串%d 有符号整数(十进制)%u 无符号整数(十进制)%o 无符号整数(八进制)%x 无符号整数(十六进制)%X 无符号 ...
- todo 看看堆栈里的东西
类变量,成员变量,静态方法里的变量.参数,成员方法里的变量,参数