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 ...
随机推荐
- 论文阅读-(ECCV 2018) Second-order Democratic Aggregation
本文是Tsung-Yu Lin大神所作(B-CNN一作),主要是探究了一种无序的池化方法\(\gamma\) -democratic aggregators,可以最小化干扰信息或者对二阶特征的内容均等 ...
- 配置vue项目的自定义config.js
[1]不采用脚手架的config文件夹中的配置文件 [2]在static文件夹下,自定义一个congfig.js文件 // 配置开发环境下服务器地址 window.Glod = { pmsApiUrl ...
- passwd的使用例子
passwd 作为普通用户和超级权限用户都可以运行,但作为普通用户只能更改自己的用户密码,但前提是没有被root用户锁定:如果root用户运行passwd ,可以设置或修改任何用户的密码: passw ...
- Jsp Layout 布局页
本文章仅用于知识记录 /WEB-INF/tags/layout.tag <%@ tag language="java" pageEncoding="UTF-8&qu ...
- python requests 高级用法
高级用法 本篇文档涵盖了 Requests 的一些高级特性. 会话对象 会话对象让你能够跨请求保持某些参数.它也会在同一个 Session 实例发出的所有请求之间保持 cookie, 期间使用 url ...
- 【JZOJ3400】旅行
description 从前有一位旅者,他想要游遍天下所有的景点.这一天他来到了一个神奇的王国:在这片土地上,有n个城市,从1到n进行编号.王国中有m条道路,第i条道路连接着两个城市ai,bi,由于年 ...
- re模块补充
)# 后面加数字代表前面多少个进行替换print(ret8) # stars466c7#7.subn() 会返回替换了多少次ret9=re.subn('\d','asd','sh8sd6sds7smm ...
- Apache Flink 进阶入门（二）：Time 深度解析
前言 Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction.中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层 ...
- HAVING方法也是连贯操作之一
HAVING方法也是连贯操作之一,用于配合group方法完成从分组的结果中筛选(通常是聚合条件)数据. having方法只有一个参数,并且只能使用字符串,例如: $this->field('us ...
- P++ 1.0.5
#include<bits/stdc++.h> #define begin { #define end } #define while while( #define if if( #def ...