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 ...
随机推荐
- node环境下安装vue-cli
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- 20.multi_协程方法抓取总阅读量
# 用asyncio和aiohttp抓取博客的总阅读量 (提示:先用接又找到每篇文章的链接) # https://www.jianshu.com/u/130f76596b02 import re im ...
- 1.关于Python的发展历史你知道吗？
1989,为了度过圣诞假期,Guido开始编写Python语言编译器.Python这个名字来自Guido的喜爱的电视连续剧<蒙蒂蟒蛇的飞行马戏团>.他希望新的语言Python能够满足他在C ...
- Spring NamedParameterJdbcTemplate详解（10）
NamedParameterJdbcTemplate和JdbcTemplate功能基本差不多.使用方法也类型.下面具体看下代码. db.properties 1 jdbc.user=root 2 jd ...
- 面试系列九 es 提高查询效率
,es性能优化是没有什么银弹的,啥意思呢?就是不要期待着随手调一个参数,就可以万能的应对所有的性能慢的场景.也许有的场景是你换个参数,或者调整一下语法,就可以搞定,但是绝对不是所有场景都可以这样. 一 ...
- java笔试之自守数
自守数是指一个数的平方的尾数等于该数自身的自然数.例如:25^2 = 625,76^2 = 5776,9376^2 = 87909376.请求出n以内的自守数的个数 接口说明 /*功能: 求出n以内的 ...
- Python基础知识之3——运算符与表达式
一.概念: 运算符:运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算.比如10+4=14,其中操作数是 10 和 4,运算符是“+” . Python 语言主要支持运算符类型有:算术运算 ...
- Qt下QMainWindow内部QTableView不能自适应大小
中央窗体设置的是一个QWidget 一直排查不到原因 最后发现为 因为布局中为QTableView设置了对齐方式 取消即可!
- h5页面在不同ios设备上的问题总结
1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种 ...
- 廖雪峰Java14Java操作XML和JSON-1XML-1XML介绍
1.XML:可扩展标记语言(extensible Markup Language) 是一种数据表示格式 可以描述非常复杂的数据结构 用于存储和传输数据 1.1XML特点: 1.纯文本,默认utf-8编 ...