目录
1.获取dom元素
1)前提:元素---存在于文档(document)之中,想要操控元素去改变,必须先通过文档获取元素;
2)文档定义:文档是一个对象,他的上一级是window对象(window对象是最顶级的对象)
3)获取文档:文档不需要获取,直接使用即可;
console.log(document)
4)获取html---document.documentElement获取;
console.log(document.documentElement);
5)获取body--可以按照普通方式获取也可直接document.body获取;
console.log(document.body);
6)获取元素
[1]get方式获取
1)语法:
-
通过标签名获取
-
document.getElementsByTagName('标签名')
-
element.getElementsByTagName('标签名')
-
注:只有标签名获取可以使用 元素 调用
-
-
通过类名获取
-
document.getElementsByClassName('类名')
-
-
通过id名获取
-
document.getElementById('id名')
-
-
通过属性名获取
-
document.getElementsByName('name属性值')
-
常用于form表单
-
2)特点
-
通过标签名、类名、name属性值获取的返回值为带有指定标签名/类名/name属性名的元素对象的集合,以伪数组的形式存储;
-
若是没有,返回一个空数组,
-
返回1个元素也是数组;
-
若是获取某个元素通过下标获取即可
-
-
通过id名获取元素返回值为带有指定id名的单个元素对象(id名在文档中具有唯一性)
-
若有带相同的id名的元素,不报错;但仅能获取第一个带有指定id名的元素
-
3)举例说明
<body>
<div>111</div>
<div>112</div>
<div>113</div>
<div>114</div>
<div id="target1">115</div>
<div>116</div>
<div>117</div>
<div class="target2">118</div>
<div>119</div>
<div class="target3 target2">1110</div>
<input type="text" name="input" />
<script>
// 1.通过标签名获取
console.log(document.getElementsByTagName('div')[0].innerHTML) //111
// 2.通过类名获取
console.log(document.getElementsByClassName('target2')[1].innerHTML) // 1110
// 3.通过id名获取
console.log(document.getElementById('target1').innerHTML) // 115
// 4.通过属性名获取
console.log(document.getElementsByName('input')) // input元素
</script>
</body>
[2]query方式(通过选择器获取)获取
1)语法
- 获取符合该选择的某个元素
- document.querySelector('选择器')
- 返回符合条件的第一个元素;
- 获取符合该选择的全部元素
- document.querySelectorAll('选择器‘)
- 返回值是一个列表,以伪数组的形式进行存储,若是找不到符合条件的元素,则返回一个空数组;
2)举例说明
<body>
<div>111</div>
<div>112</div>
<div>113</div>
<div>114</div>
<div id="target1">115</div>
<div>116</div>
<div>117</div>
<div class="target2">118</div>
<div>119</div>
<div class="target3 target2">1110</div>
<input type="text" name="input" />
<script>
console.log(document.querySelector('.target2').innerHTML) //118
console.log(document.querySelectorAll('.target2')[1].innerHTML); // 1110
</script>
</body>
[3]扩展什么叫做伪数组
js_数组_数组/伪数组概论_乖女子@@@的博客-CSDN博客_set伪数组
2.对元素属性进行操作
[1]使用点语法或[]对元素属性进行操作
元素本质是一个对象,元素的属性就是对象的属性,所以可以使用点语法获取[]来获取/设置元素属性;
[1]获取属性
element.属性名
element[属性名] // 可以解析变量名中的字符串
[2]设置/修改
element.属性名 = 值
element[属性名] = 值 // 可以解析变量名中的字符串
[3]删除
- element.属性名=''
- element[变量名]=''
- element['变量名']=''
特点
- [1]使用点语法或[]操作元素属性时类名为className;
- [2]通过点语法或[]设置自定义属性并不会显示在标签中(仅自定义属性)(通过控制台观察不到),但是可以使用原语法去获取(使用点语法.[]设置的仅能通过点语法.[]获取通过getAttribute获取不到)也可使用console.dir(element)查看。
- [3]过点语法或[]删除元素属性仅仅是删除了元素的属性值,属性名依旧存在(删除不完全)
[3]举例说明
<body>
<div id="box">222</div>
<script>
const box = document.querySelector('#box')
box.dataName = 111
// 通过控制台观察元素为<div id="box">222</div>并没有显示我们涉资的自定义属性
const aaa = 'dataName'
// 点语法和[]本质是同一种语法
console.log(box[aaa]) // 111
// 使用点语法.[]设置的仅能通过点语法.[]获取通过getAttribute获取不到
console.log(box.getAttribute('dataName')) // null
// console.dir可以看到当前对象的所有属性(包含自定义属性)
console.dir(box)
</script>
</body>
[2]通过Attribute方法对元素属性进行操作
attribute方法是用来对元素属性进行操作的
[1]获取元素属性
element.getAttribute('属性名')
[2]设置/修改元素属性
element.setAttribute('属性名',’属性值‘)
[3]删除元素属性
element.removeAttribute('属性名')
特点
- 使用Attribute操作属性时类名为class;
- 通过setAttrbute设置的任何元素属性(包括自定义属性)会显示在行内(通过控制台可见),通过setAttribute设置的自定义属性只能通过getAttribute去获取(通过点语法获取不到)
- 删除属性时将属性名与属性值一起删除
[3]案例:多类名
如图,当点击哪个按钮,就添加对应样式的类名,使用点语法!
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
}
.bgcolor {
background-color: red;
}
.textColor {
color: skyblue;
}
.fontsize {
font-size: 22px;
}
.radius {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box">我是一个粉刷匠,粉刷本领强</div>
<hr />
<div id="cla">
<button>背景颜色</button>
<button>文本颜色</button>
<button>字体大小</button>
<button>是否为圆</button>
</div>
<script>
let box = document.getElementById('box')
let cla = document.getElementById('cla')
// 给按钮的父盒子设置点击事件
cla.onclick = function (e) {
if (e.target.innerHTML == '背景颜色') {
box.className += ' bgcolor'
} else if (e.target.innerHTML == '文本颜色') {
box.className += ' textColor'
} else if (e.target.innerHTML == '字体大小') {
box.className += ' fontsize'
} else if (e.target.innerHTML == '是否为圆') {
box.className += ' radius'
}
}
</script>
</body>
3.对元素样式进行操作(属性)
注:js中样式属性名若是带有-,全部变为驼峰命名;
[1]通过点语法对元素样式进行操作
元素本质就是一个对象,所以可以使用点语法来设置元素的样式属性
[1]获取样式
element.style.属性名
[2]设置/修改样式
element.style.属性名=’值‘
特点:1)语法:
- 通过点语法设置/修改的样式属于行内样式,权重比较高!
- 通过点语法获取样式只能获取行内样式,无法获取嵌入式或者链接式样式,获取嵌入式或者外部样式没有任何返回值!
[2]通过getComputedStyle获取元素样式
1)语法:
- window.getComputedStyle(元素).属性名
- window.getComputedStyle(元素)[’属性名‘]
- window.getComputedStyle(元素)[变量名]
2)特点:任何位置的样式都可以正常获取(嵌入式,行内,链接式);
若是获取宽高带单位!
3)举例说明
<style>
#box {
width: 200px;
height: 200px;
}
.bgcolor {
background-color: red;
}
.textColor {
color: skyblue;
}
.fontsize {
font-size: 22px;
}
.radius {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box" class="bgcolor textColor fontsize radius ">
我是一个粉刷匠,粉刷本领强
</div>
<hr />
<script>
let box = document.getElementById('box')
let cla = document.getElementById('cla')
console.log(box.style.backgroundColor) // 只能获取行内样式,获取嵌入式返回值为空
console.log(window.getComputedStyle(box)['backgroundColor']) //rgb(255, 0, 0)
</script>
[3]通过offerset家族获取元素样式
1.通过offset家族获取元素的宽高
- 语法:
- element.offsetWidth;
- element.offsetHeigh;
- 返回值
- 不带单位
- 返回宽高为content+padding+border
2.通过offset家族获取元素距离具有定位的父元素的距离
- 语法:
- element.offsetLeft;
- element.offsetTop;
- 特点
- 返回值不带单位
- 返回值包括本身的margin值
3.通过offset家族获取具有定位的父元素
- 语法
- element.offsetParent;
- 获取父元素
- element.parentNode;
- element.parentElement;
应用
如上图存在一列广告投放账户列表展示,广告投放账户数量不确定;
希望当一列展示不开的时候就显示省略号并在右侧提示共XX个账户;
-
实现
-
[1]给展示盒子设置max-width(用于设置css样式);
-
[2]进入页面的时候获取盒子宽度,若是大于等于max-width,表示文本内容已经超过最大宽度,则显示右侧提示信息;
-
[3]省略号使用css控制;
-
-
& .info{ height: 20px; max-width: 428px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-
created(){ if(document.getElementById('product').offsetWidth>=428){ // 超过了,对数据处理,展示共XXX账户数据文本 }else{ // 没有超过,不做处理 } }
[4]通过client家族获取元素样式
1.通过client家族获取元素的宽高
- 语法:
- element.clientWidth;
- element.clientHeigh;
- 返回值
- 不带单位
- 返回宽高为content+padding
2.通过client家族获取元素边框
- 语法:
- element.clientLeft;
- element.clientTop;
- 特点
- 返回值不带单位
- 返回值为元素的border值
[5]通过scroll家族获取元素样式
1.通过scroll家族获取元素的宽高
- 语法:
- element.scrollWidth;
- element.scrollHeigh;
- 返回值
- 不带单位
- 返回宽高为content+padding(包含被隐藏部分)
2.通过scroll家族获取元素的滚动距离
- 语法:
- element.scrollLeft;
- element.scrollTop;
- 特点
- 返回值不带单位
- 返回值为元素在盒子中的滚动距离
3.获取页面的滚动举例(*)
兼容方案
top:let y=document.body.scrollTop || dcoument.documentElement.scrollTop || window.pageYOffset;
left: let x=document.body.scrollLeft || document.documentElement.scrollLeft || window,pageXOffset;
[6]js引入css样式的方法
- 1)创建link标签
- let linkBox=document.createChind('link')
- 2)添加href属性,属性值为引入的css的路经
- linkBox.href='路经'
[7]总结
- 通过点语法设置/修改的样式属于行内样式,权重比较高!通过点语法获取样式只能获取行内样式,无法获取链接式与内嵌式;
- 使用getComputedStyle可以获取元素的样式(任何位置都可以获取)
- 获取元素宽高
- 使用offsetWidth、offsetHeight可以获取元素的宽高,值为content+padding+border;
- 使用clientWidth\clientHeight方法可以获取元素的宽高,值为content+padding;
- 使用scrollWidth\scrollHeight方法可以获取元素的宽高,值为content+padding,包含隐藏部分;
- offset家族可以获取距离自己最近的具有定位的父元素的距离;client家族可以获取元素border;scroll可以获取元素在盒子中的移动距离;
4.对元素进行操作(方法)
[1]克隆元素
概念:克隆元素即复制元素;
- 语法
- element.cloneNode();
- 复制谁谁调用
- 参数
- true---深克隆
- false(默认)---浅克隆
- 返回值
- 若是深克隆---返回值为一个相同的元素,包含元素内容
- 若是浅克隆---返回值为一个相同的元素,不包含元素内容
- 注意
- 克隆时注意id不能重复
- 解决:可加一个编号与id进行字符串拼接;
- 若克隆元素带有id属性
1)let index=0;
2)每克隆一次index++;
将克隆元素id名和index做一个字符串拼接
- 若克隆元素带有id属性
[2]创建元素
- 语法
- document.createElement('标签名');
- 无中生有只有document可以调用
- 返回值
- 一个空白(不带内容)的元素
- 注:若想添加文字---element.innerText=''即可
-
注:创建的元素不会直接显示在界面上,还需要调用其他方法将该元素添加到界面上
[3]追加元素
- 概念: 将克隆或者创造的元素添加到某个元素中
- 语法
- 父元素.appendChild(元素名)
- 追击到谁身上就用谁来调用
- 注:元素名不加引号
- 注:相当于剪切(追加后此元素原来位置没有元素了)
[4]删除元素
-
概念: 删除某个指定元素,需要通过父元素来调用;
-
语法
-
父元素.removeChild(删除元素名);
-
注:元素名不加引号
-
- 注:获取的元素只是存在一个伪数组中--伪数组去不存在数组的方法,所以不能通过shift/pop/splice删除元素
[5]插入元素
- 概念: 通过父元素在某个元素前面添加新元素
- 语法:
- 父元素.insertBefore(newBox,tag);
- 将newBox添加到tag元素之前
- 追加与插入区别:
- 追加是追加到父元素里面作为最后一个元素;
- 插入是追加到父元素里面作为tag元素的前面一个元素;
[6]替换元素
- 概念: 通过父元素将某元素替换成新的元素
- 语法 :父元素.replaceChild(新元素,旧元素)
总结:
- 对元素得操作都是方法!
- 调用
- 克隆---克隆谁谁调用;
- 创建---无中生有只有document(文档)可以调用;
- 追加---追击到谁身上就用谁来调用(父元素调用)
- 删除---父元素调用
- 插入---父元素调用
5.事件
6.节点
1.定义
页面中的所有内容均可看作一个节点;
可以理解为是文档树上的内容;
2.节点分类
-
文档节点:document---顶级节点
-
获取:不需要获取直接可以使用document
-
-
元素节点:element
-
获取:通过获取元素的方式获取元素节点
-
eg:document.getElementsByTagName('标签名')
-
-
-
属性节点:attribute
-
获取:元素.attribute
s
获取某元素的全部的属性存放在伪数组里,通过下标获取想要获取的属性节点
-
-
文本节点:text
-
获取:先通过element.childNodes获得某元素的所有节点,通过下标获取文本节点
-
-
注释节点:comment
-
获取:先通过element.childNodes获得某元素的所有节点,通过下标获取文本节点
-
每种节点的三大特性
-
节点名称:nodeName
-
节点.nodeName
- document文档节点:#document;
- element元素节点:大写的标签名;
- attribute属性节点:属性名;
- text文本节点:#text;
- comment注释节点:#comment;
-
-
节点类型:nodeType
-
节点.nodeType
-
document文档节点:9;
-
element元素节点:1;
-
attribute属性节点:2;
-
text文本节点:3;
-
comment注释节点:8;
-
-
-
节点内容
-
节点.nodeValue
-
document文档节点:null;
-
element元素节点:null;
-
attribute属性节点:属性值;
-
text文本节点:文本;
-
comment注释节点:注释;
-
-
3.获取节点
-
获取所有子节点
-
语法:
element.childNodes
; -
结果:返回值为一个伪数组,存放该元素所有的子节点
-
注:
回车也算是一个文本节点
-
举例说明
<div> <p>这是一个寂寞的天</p> <p>这是一个寂寞的天</p> <p>这是一个寂寞的天</p> 下这有些伤心的雨 <!-- 啦啦啦 --> </div> <script> let box = document.getElementsByTagName('div')[0] let arr = box.childNodes console.log(arr.length) //9 let arr2 = box.children console.log(arr2.length)// 3 </script>
-
-
获取所有的子元素节点
-
语法:
element.children
-
结果:返回值为一个伪数组,存放该元素所有的子元素节点
-
-
获取某元素内的第一个子节点
-
语法:element.firstChild;
-
-
获取某元素内的第一个子元素节点
-
语法:
element.firstElementChild
;
-
-
获取某元素内的最后一个子节点
-
语法:element.lastChild;
-
-
获取某元素内的最后一个子元素节点
-
语法:
element.lastElementChild
;
-
-
获取某元素下一个兄弟节点
-
语法:element.nextSibling;
-
-
获取某元素下一个兄弟元素节点
-
语法:
element.nextElementSibling
; -
注:若是没有下一个兄弟节点则返回null
-
-
获取某元素上一个兄弟节点
-
语法:element.previousSibling;
-
-
获取某元素上一个兄弟元素节点
-
语法:
element.previousElementSibling
; -
注:若是没有上一个兄弟节点则返回null
-
-
获取父节点
-
语法1:
element.parentNode
; -
语法2:element.parentElement;
-