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 ...
随机推荐
- 从 SPIR-V 到 ISPC：将 GPU 计算转化为 CPU 计算
游戏行业越来越多地趋向于将计算工作转移到图形处理单元 (GPU) 中,导致引擎和/或工作室需要开发大量 GPU 计算着色器来处理不同的计算任务.但有时候在 CPU 上运行这些计算着色器非常方便,不必重 ...
- PJzhang:python基础入门的7个疗程-six
猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课 https://www.liaoxuefeng.com/wiki/1016959663602400 第16天:开源模块 sy ...
- Spring Cloud Bus 自动更新配置
---恢复内容开始--- Spring Cloud Config 结合 Spring Cloud bus 实现 git 仓库提交配置文件 触发消息队列 应用自动更新配置 1. config 服务端 添 ...
- 【C/C++】什么是类型安全
什么是类型安全 转自:http://hi.baidu.com/chenfalei/blog/item/f33ac0133500ac21dd540186.html 编程语言的最终梦想:静态类型安全 常听 ...
- 【VS开发】C++线程安全
我们是多么渴望各种C++类都是多线程安全的,然而一旦涉及到对象间的交互,这样的渴望可能就只能是奢望了.下面,我们以设计一个双向链结点为例,看看要使其多线程安全将会带来一些什么问题. class Dou ...
- linux下显示完整路径，linux下显示绝对路径
linux下,命令行显示路径仅最后一个文件名,非常不方便,想显示完整路径.环境背景:linux,无root权限,可sudo(为了服务器安全,一般只给管理员root账号和密码,普通账号仅sudo权限)方 ...
- 搞懂MySQL GTID原理
从MySQL 5.6.5 开始新增了一种基于 GTID 的复制方式.通过 GTID 保证了每个在主库上提交的事务在集群中有一个唯一的ID.这种方式强化了数据库的主备一致性,故障恢复以及容错能力. GT ...
- Java 中的动态代理
一.概述 1. 什么是代理 我们大家都知道微商代理,简单地说就是代替厂家卖商品,厂家“委托”代理为其销售商品.关于微商代理,首先我们从他们那里买东西时通常不知道背后的厂家究竟是谁,也就是说,“委托者” ...
- mysql-1.1基础
笔记内容:mysql基础,创建数据库,创建表,操作数据表,操作数据,简单查询,条件查询,排序,分组,聚合,连接查询(等值连接,内连接,外链接),子查询 自己提示:脑图笔记存于网盘中 右键:新标签页打 ...
- shell脚本之nginx启动脚本、统计日志字段、for循环实战、跳板机
1.NGINX启动脚本 #!/bin/bash # chkconfig: 235 32 62 # description: nginx [ -f /etc/init.d/functions ] &am ...