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 ...
随机推荐
- git-常见问题解决
1.fatal: refusing to merge unrelated histories 执行 $git pull origin master –allow-unrelated-histories ...
- neo4j算法（1）-介绍
neo4j为图数据库,其中涉及的也就为图算法,图算法被用来度量图形,节点及关系. 在neo4j中,通过call algo.list() 可查看neo4j中的算法列表. 在neo4j官方文档中,主要记录 ...
- 2019-11-7-C#-dotnet-线程不安全的弱引用缓存
title author date CreateTime categories C# dotnet 线程不安全的弱引用缓存 lindexi 2019-11-7 9:45:5 +0800 2019-11 ...
- 跟我一起使用create-react-app脚手架搭建vw-layout解决方案
之前也是看过大漠的vw适配Vue-cli,我自己写H5,还有使用vue做项目的时候,会搭建大漠博客中的那一套. 现在在github上面,看见了一位博主使用create-react-app也是用vw适配 ...
- JavaScript中获取HTML元素的方式
JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象 document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...
- Android开发 音视频开发需要了解的专业术语知识
前言 在摸索一段时间的音视频开发后,越来越发现这个坑的深度真是特别的深. 除了了解Android自带的音视频处理API以外,还得了解一些视频与音频方面的知识.这篇博客就是主要讲解这方面的专业术语.内容 ...
- git安装与上传
git安装与上传 上一篇 / 下一篇 2017-03-10 10:09:42 / 个人分类:代码管理工具 查看( 63 ) / 评论( 0 ) / 评分( 0 / 0 ) 1.安装Git-2.11. ...
- Box 'laravel/homestead' could not be found.
vbox vagrant.box Homestead 都安裝好的情況下.在homestead目錄下,執行vagrant up出錯 Homestead\scripts\文件夹中,打开homestead. ...
- 服务器迁移部署PosApp
绑定 基本配置 高级设置
- 安装elasticsearch-head插件
安装node ###下载 wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz ### 解压 tar xvf nod ...