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 ...
随机推荐
- 【Linux开发】linux中关于dma_alloc_coherent的用法
大家都知道,DMA的操作是需要物理地址的,但是在linux内核中使用的都是虚拟地址,如果我们想要用DMA对一段内存进行操作,我们如何得到这一段内存的物理地址和虚拟地址的映射呢?dma_alloc_co ...
- MSF魔鬼训练营-3.3.2 口令猜测与嗅探
密码暴力破解以SSH为例,其他协议方法类似 SSH msf > use auxiliary/scanner/ssh/ssh_login msf auxiliary(ssh_login) ...
- ssh配置互信不成功，两台服务器有一台需要输入密码
在客户现场,某国产平台,配置机器互信时发现,A可以免密访问B,而B不能免密访问A,且B不能免密访问B,进行了下面的几个处理后搞定. 1)确定目录权限:/root/ 755/root/.ssh 700/ ...
- NOIP2017 D2T3 题解
题面 这种数据范围不是乱搞dfs就是乱搞状压DP 首先应该通过任一方式求出a和b的值: 任意一条抛物线只用两头猪就可以确定,所以我们N^2枚举,并把在这两头猪的抛物线上的猪都存进状态state[i][ ...
- QQ登錄實現功能
<html> <head> <title></title> </head> <body> <form> <p& ...
- 04: gitlab安装与使用
1.1 gitlab安装(192.168.56.12中安装) 1.GitLab是什么? 1. GitLab实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目. 2. GitLa ...
- 集成学习-Boosting 模型深度串讲
首先强调一下,这篇文章适合有很好的基础的人 梯度下降 这里不系统讲,只介绍相关的点,便于理解后文 先放一个很早以前写的 梯度下降 实现 logistic regression 的代码 def tidu ...
- win10 64支持承载网络
在intel官网找到对应型号的网卡驱动. 下载win7版本的,更新驱动.安装完毕之后还要在设备管理里面更新2019 7 30这个版本的驱动. 英特尔® PROSet/无线软件和面向 IT 管理员的驱动 ...
- Sleepy Game CodeForces - 936B
大意: 给定有向图, 初始点S, 两个人轮流移动, 谁不能移动则输, 但后手睡着了, 先手可以控制后手操作, 求最后先手结果. 刚开始看错了, 还以为后手也是最优策略.... 实际上判断是否有偶数个节 ...
- sql server 函数详解（4）日期和时间函数
时间和日期函数第一部分 时间和日期函数第二部分