JavaScript笔记：DOM（一）

最新推荐文章于 2024-06-24 20:35:30 发布

袁成新（Chauncey Yuan）

最新推荐文章于 2024-06-24 20:35:30 发布

阅读量113

点赞数

分类专栏： JavaScript学习文章标签： js DOM

本文链接：https://blog.csdn.net/weixin_43666825/article/details/99710477

版权

17 篇文章 2 订阅

订阅专栏

DOM （ Document Object Model ）：专门操作HTML内容的API
DOM是JavaScript的三个重要组成（ES(核心语法) DOM BOM）之一

能够操作所有结构化文档（HTML，XML）
特点：万能的但是复杂而且繁琐

专门操作HTML内容的API 常用的API进行简化
特点：简单但是并非是万能的

网页中一切在内存中都是以树形结构存储的
树形结构是存储上下级包含关系最直观的结构
HTML中的每一个元素（元素、属性、文本）都是一个节点对象（Node），其中document对象是整棵树的根节点

document  ==>> 9
element  ==>> 1
attribute  ==>> 2
text  ==>> 3

document  ==>> #document
element  ==>> 全大写的标签名
attribute  ==>> 属性名
text  ==>> #text

document  ==>> null
element  ==>> null
attribute  ==>> 属性值
text   ==>> 文本的内容

document.documentElement  ==>> <html>
document.head  ==>> <head>
document.body   ==>> <body>

node.parentNode //获得node的父节点
node.childNodes //获得node的所有子节点
node.firstChild //获得node下的第一个子节点
node.lastChild //后的node下最后一个子节点

node.preivousSibling //获得当前节点的前一个兄弟节点
node.nextSibling //获得当前节点的下一个兄弟节点
//注意：网页中的一切都是节点，包括换行和空字符

elem.parentElement //获得一个父元素对象
elem.childen //获得子元素对象集合
elem.firstElementChild //获得第一个子元素对象
elem.lastElementChild //获得最后一个子元素

elem.preivousElementSibling //获得当前节点的前一个兄弟元素
elem.nextElementSibling //获得当前节点的下一个兄弟元素

在整个页面或者父元素下，查找属性或标签符合条件的元素对象

只能用document调用仅返回一个元素

var div = document.getElementById("box");

查找指定父元素下的指定标签元素，任何父元素都可以调用
返回值放在集合中，没有找到符合要求的子节点，返回一个空数组
查找不仅只查直接子节点，而且查找所有子代节点

var divs = document.getElementsByTagName("div");
var aLinks = div.getElementsByTagName("a");

查找表单，只能用document调用
返回一个动态数组

var form1 = document.getElementById("form1");
var chks = document.getElementsByName("sex");

查找的子代只要标签中class属性值符合要求的就被选中

var lis = nav.getElementsByClassName("active");

关注

专栏目录