Dom基础语法

m0_67805493

于 2022-04-01 09:02:04 发布

阅读量199

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67805493/article/details/123889000

版权

DOM基本操作

DOM 全称document object model 文档对象模型操作HTML

HTML文档有HTML+css组成 DOM 利用js操作HTML+css的

操作元素节点 element Element 元素节点对象

查获取元素节点的方式

通过选择器获取

div就是元素的节点(任意的标签都是元素节点)

id就是属性节点（任意的属性都是属性节点）

你好就是文本节点（任意的文本都是文本节点）

<div id="box" class="content" name="divName">你好</div>

id选择器

通过id属性来获取元素里面的参数为string类型的id，返回值是一个HTMLElement

获取id值为box的元素

var box = document.getElementById("box")console.log(box);

class选择器

通过class属性名来获取对应的元素

它传入的参数为string类型的class名字

返回值是一个HTMLCollectionof<Element>，返回的是一个集合，这个集合里面存储了Element。

HTMLCollection是一个类似数组的一种结构，具备下标同时具备length属性，可能会有多个数据。

但是HTMLCollection并不是一个数组，它不具备数组的方法，只是存在对应的下标和length属性

var content = document.getElementsByClassName("content")

console.log(content);

可以通过下标来获取对应的HTMLcollection里面的元素

console.log(content[0]);

通过name名字来获取

返回的是一个nodeList，nodeList不是HTMLCollection nodeList和HTMLCollection的区别但是它同样具备对应的下标和length属性，他的方法比HTMLCollection要多

var divName = document.getElementsByName('divName')
console.log(divName);
console.log(divName[0]);

复合选择器

里面的参数为string类型的选择器，返回第一个匹配选择器的元素，返回的是一个element

var selectDiv = document.querySelector('div')

console.log(selectDiv);

返回所有匹配选择器内容 接收的是一个nodeList

var selectAll = document.querySelectorAll('.content')//这个类似于css写法，css里面.box,#box。在这个里也是这样写

console.log(selectAll);

console.log(selectAll[0]);