入门dom获取和操作及相关基础知识

DOM操作

简介:dom全称 document object model文档对象模型

docment 在js中 document是链接HTML的通道 使用document来操我们的html

object model 在js中 所有的标签都是对象 也叫元素对象 就是对象模型

dom作为一个内置对象 自然就拥有一些内置的属性和方法

属性
1.document.body获取body标签
2.document.title获取网页标题
3.document,scripts获取所有的script标签
4.document.imges 获取所有的图片元素
方法
1.document.getElementById(‘id名’)通过id获取元素
2.document.write(‘内容’) 写入内容
3.document.writeln()写入内容后添加换行
4.document.createElement()创建元素对象 参数 标签名

查找元素

1.document.getElementsByTayName()
使用document中的一些方法来查找HTML中的元素对象
使用标签名查找,得到一个元素合集,一个类数组
不能使用数组的内置函数,但是可以当作函数使用
可以使用Array.from()转化为数组
2.document.getElementsByClassName()
使用class获取元素 得到元素的集合

3. document,getElementById()
   在js中,会将拥有的id的标签,自动添加到js的全局对象中,如果多个标签拥有相同的id,这个属性 将会变成元素集合
4. document,getElementByName()
   通过标签的name属性值获取元素,得到节点列表,可以使用Array.from()转化为数组
   5.通过css选择器选中一个标签
   document.querySelector()
5. 通过css选择器选中所有匹配的元素,得到一个节点列表 支持大多数的css选择器，伪元素不支持
   document.querySelectorAll(’#div span:nth-child(1)’)
   以上六种方式，都可以使用元素来调用，缩小查询范围，只能查询内部的元素

一些特殊的元素不用获取，就能直接使用

1、拥有id的元素
document.body;// body元素
console.log(document.documentElement); // html元素
console.log(document.head); // head标签
console.log(document.images); // 图像标签
console.log(document.all); // 所有标签
console.log(document.scripts); // 脚本标签

元素的操作

通常情况下 我们使用js获取到元素之后都会使用js来操作元素
操作内容
读取内容
innerText只获取标签中的文字和换行符
innerHTML获取标签中的所有子标签 文字 空格 黄航符
textContext获取标签中的文字 空格 换行符
设置内容
innerText = ‘
132
456’; // 只设置文字和换行符
div.innerHTML = ‘
132
456’; // 设置标签中的所有子标签、文字、 空格、换行符
div.textContent = ‘
132
456’; // 只设置文字和换行符
操作属性
一些自带的属性可以直接使用 . 操作符来读取和修改
var imgDom = document.getElementsByTagName(‘img’)[0];
imgDom.src = “”; // 图像标签的src属性
var aDom = document.getElementsByTagName(‘a’)[0];
console.log(aDom.href); // a标签的href属性
class属性,因为class属性可能拥有多个值,因此class属性不能直接修改
className 属性,元素的所有class,修改该值,将会覆盖元素原有的所有class

使用classList来对元素的class属性进行精确操作

1.classList.add() 增加类名
2.classList.remov()e删除类名
3.classList.replace('原本的类名','要替换的类名')替换
4.classList.contains()查询是否拥有当前class 返回布尔值
5.classList.toggle()在当前classList中查找是否拥有当前class,有则删除,没有就添加

style属性
设置元素行内样式,直接设置style=“XXX”，会覆盖元素原有的行内样式
getComputedStyle() 获取元素的计算属性，实际的样式属性
自定义属性
自定义属性 标签默认不存在的属性
getAttribute()读取属性
setAttribute(‘自定义属性名’,属性值)设置属性 参数为1属性名和属性值
使用dataset设置或读取自定义属性
设置 元素.dataset.自定义属性名=属性值
获取所有属性值
元素.attributes