javascript基础：dom
Dom:
* 概念：Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作
* Dom将HTML文档表达成树结构
* W3C Dom 标准被分为 3 个不同的部分:
* 核心 Dom - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
--------------------------------------------------------------------
* Node：节点对象，其他5个的父对象
* XML Dom - 针对 XML 文档的标准模型
* HTML Dom - 针对 HTML 文档的标准模型
一、核心DOM模型：
* Document：文档对象
1、创建（获取）：在html dom模型中可以使用window对象获取
1、window.document
2、document
2、方法：
1、获取Element对象：
1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一
2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组
3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组
4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div> <div class="cls4">div4</div>
<div class="cls5">div5</div> <input type="text" name="username"> <script> //1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一
var div = document.getElementById("div1") //2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组
var divs = document.getElementsByTagName("div")
// alert(divs.length) //3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组
var div_cls = document.getElementsByClassName("cls5")
alert(div_cls.length) //4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组
var ele_username = document.getElementsByName("username")
alert(ele_username.length) </script>
2、创建其他DOM对象：
* createAttribute(name)
* createComment()
* createElement()
* createTextNode()
3、属性：
* Element：元素对象
1、 获取/创建：通过document来获取和创建
2、 方法：
1、removeAttribute()：删除属性
2、setAttribute()：设置属性
<a>点我点我</a>
<input type="button" value="设置属性" id="btn_set">
<input type="button" value="删除属性" id="btn_remove"> <script> //获取btn
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[]; element_a.setAttribute("href", "https://www.baidu.com")
} //获取btn
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[]; element_a.removeAttribute("href", "https://www.baidu.com")
}
</script>
* Node：节点对象，其他5个的父对象（节点对象代表文档数中的一个节点）
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom数：
* appendChild()：向节点的子节点列表的结尾添加新的子节点
* removeChild()：删除（并返回）当前节点的指定子节点
* replaceChild()：用新节点替换一个子节点
* 属性：
* parentNode 返回节点的父节点
<style>
div{ border: 1px solid black;
} #div1{
width: 200px;
height: 200px;
} #div2{
width: 100px;
height: 100px;
} #div2{
width: 50px;
height: 50px;
}
</style>
</head>
<body> <div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0)" id="del">删除子节点</a>
<a href="javascript:void(0)" id="add">添加子节点</a>
<!-- <input type="button" value="删除子节点" id="del"> -->
<script>
//1、获取超链接
var element_a = document.getElementById("del");
//2、绑定单击事件
element_a.onclick = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2) } /*
超链接功能：
1、可以被点击：样式
2、点击后跳转href指定的url 需求：保留1功能，去掉2功能
实现：href="javascript:void(0)"
*/ //1、获取超链接
var element_add = document.getElementById("add");
//2、绑定单击事件
element_add.onclick = function(){
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3); } var div2 = document.getElementById("div2")
var div1 = div2.parentNode
alert(div1) </script> </body>
二、HTML DOM
1、标签体的设置和获取：innerHTML
2、使用html元素对象的属性
3、控制样式
1、使用元素的style属性来设置，如：
<div id="div1">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function(){
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size --> fontSize
div1.style.fontSize = "20px";
}
</script>
2、提前定义好类选择器的样式，通过元素的className属性来设置class属性值
//修改方式2
//className
var div2 = document.getElementById("div2");
div2.onclick = function(){
div2.className = "d2"
}
javascript基础：dom的更多相关文章
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- JavaScript基础 -- DOM
一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM可以说是制作动态页面的强有力工具.DOM不是JavaScript语言的一部分,而是内置在浏览器中的一 ...
- JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）
DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...
- Javaweb学习笔记——（三）——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...
- JavaScript基础--DOM对象加强篇（十四）
1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 ...
- JavaScript基础DOM介绍和常用操作（5）
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...
- JavaScript基础 DOM的操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: window对象——浏览器 ...
- javascript基础DOM操作
DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以 ...
- javascript基础-DOM原理
解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...
- 从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM
1:DOM(Document Object Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DO ...
随机推荐
- 第四周——重新clone项目后maven问题
重新clone项目后,一直报错,"类重复..." clean后install也无效果. 原因是idea在重启项目时会更改maven为默认的idea自带的maven配置,要重新设置
- P1417 烹调方案 /// DP(假设 简化公式 排序)
题目大意: https://www.luogu.org/problemnew/show/P1417 题解 看第一份方法的公式 排序后01背包 #include <bits/stdc++.h> ...
- html自定义分页
public class MyPager { /// <summary> /// 每一页数据的条数 /// </summary> public int PageSize { g ...
- JS规则 是非颠倒(逻辑非操作符）"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真
是非颠倒(逻辑非操作符) "!"是逻辑非操作符,也就是"不是"的意思,非真即假,非假即真.好比小华今天买了一个杯子,小明说:"杯子是白色的" ...
- 【daydayup】ceshuChat
时时当勉励,岁月不待人.珍惜时间伐~ 先看看项目运行的效果 这个是在本地环境打开了两个8080端口进行模拟运行的. 先放下作者的开源地址:https://github.com/ceshu/ceshuC ...
- soj97 旅行
题意:给你一棵n个点的树.m个操作,op 1:在点i上建立银行.op 2:询问从点x开始可以经过至少一个银行走到的点中编号第二大的点. n,m<=1e5. 标程: #include<bit ...
- Django简介以及安装
目录 前言 Web框架本质 服务器和应用程序 基于第三方模块实现Web框架 Python三大主流Web框架 django flask tornado Django框架介绍 安装 创建项目 创建App ...
- LUOGU P1342 请柬(最短路)
传送门 解题思路 又是一道语文题,弄清楚题意之后其实就能想出来了,从1跑一遍最短路,把$dis[n]$加入答案.在建个反图跑一遍最短路,把$dis[n]_$加入最短路就行了.第一遍是去的时候,第二遍是 ...
- Joomla - K2组件（文章管理扩展）
一.下载 K2 进入 https://getk2.org/ ,点击DOWNLOAD K2 下载K2 下载完毕得到一个安装包 二.安装 K2 进入看后台,点击顶栏主菜单 扩展管理 -> 扩展安装 ...
- VUE环境下获取当前时间并格式化--按秒数更新
<el-col :span="8"><div class="grid-content title-time"> {{date}}< ...