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 ...
随机推荐
- Django视图之FBV与CBV
一. CBV与FBV CBV:Class Based View FBV:Function Based View 我们之前写过的都是基于函数的view,就叫FBV.还可以把view写成基于类的,那就是C ...
- mysql数据的备份
一.备份方式 1.备份:逻辑备份(mysqldump,mydumper).物理备份(xtrabackup.tar.cp.rsync) 2.冗余:主备模式.数据库集群 二.备份对象 1.数据(库. ...
- seq2seq&attention图解
- idea、eclipse常用快捷键
idea常用快捷键 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以 ...
- 浏览器渲染优化4(styles and layout)
你已经学会了查找和解决问题.希望你的js能正常运行了,但这只是制作帧的一小部分.在这节课里,你将处理样式,也就是像开发工具里标记的那样,重新计算样式.学完这节课后,你将学会从样式计算过程中找到性能问题 ...
- 菜鸟系列k8s——k8s集群部署(2)
k8s集群部署 1. 角色分配 角色 IP 安装组件 k8s-master 10.0.0.170 kube-apiserver,kube-controller-manager,kube-schedul ...
- （5.6）mysql高可用系列——MySQL Utilities 管理工具
关键词:mysql工具集,mysql管理工具,mysql utilities [1]安装mysql utilities cd /download wget https://cdn.mysql.com/ ...
- Maven添加镜像仓库、更改本地仓库位置
添加镜像仓库 在conf目录下的settings.xml文件的145行左右 id表示该镜像的id mirrorOf表示为哪个仓库配置镜像,central为默认的中央仓库的id,也可以使用通配符*,来匹 ...
- FFmpeg4.0笔记：采集系统声音
Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff // 采集系统声音 void test_systemsound() ...
- 自动化测试_百度--糯米中--携程-出行<一>
1:接下来我们看看思路 和相应的功能 使用python+selenium+unittest完成测试脚本 打开chrome浏览器,窗口最大化,设置等待时间10s 打开百度首页 鼠标移动到更多产品,点击 ...