HTML5DOM红蓝盒子,DOM介绍以及使用方法

最新推荐文章于 2023-01-04 10:55:01 发布

娜娜和琳达

最新推荐文章于 2023-01-04 10:55:01 发布

阅读量338

点赞数

文章标签： HTML5DOM红蓝盒子

DOM的基本讲解

一、DOM

(Document Object Model)文档对象模型

1、有属性有方法

var person = {

name:'派大星',

fav:function(){

}

2、js中对象分类三种

(1)用户定义对象

(2)内建对象 Array Date Math (内置)

(3)宿主对象

3、Model Map(地图)

(1)把 DOM 看做一颗“树”

(2)DOM 把文档看做一颗“家谱树”

parent child sibling(兄弟姊妹)

爷爷

爸爸叔叔

你弟弟表兄弟

节点以及使用方法

一、DOM中的节点

1、元素节点(element node)

2、文本节点(text node)

3、属性节点(attribut node)

注意：没有内容的文档是没有任何价值的，而大多数内容都是由文本提供

二、获取元素节点对象的方式

选择你的课程

web全栈，请放心购买

html
css
javascript
DOM
BOM

1、document.getElementById() 获取单个对象

var eleNode = document.getElementById('classList');

console.log(eleNode);//以id获取到

console.log(typeof eleNode);

2、document.getElementsByTagName() 获取节点对象集合

var olis = document.getElementsByTagName('li');

var oTitle = document.getElementsByTagName('h2');

console.log(oTitle[0]);//只有一个，所以只获取出来一个

console.log(olis.length);//5,5个li

for(var i = 0;i

console.log(olis[i]);//所有的

}

console.log(typeof olis);

3、document.getElementsByClassName() 相对于2可以针对性的获取节点对象集合

var oItems = document.getElementsByClassName('item');

console.log(oItems);//一个集合

console.log(oItems[0]);//索引取出来的值

三、设置属性和获取属性

css

#box{

color: red;

}

html

选择你的课程

web全栈，请放心购买

html
css
javascript
DOM
BOM

1、getAttribute()获取属性值，有一个必须参数，(这个节点对象的名字)

//通过名字来查找

var title = oP.getAttribute('title');

var className = oP.getAttribute('class');

console.log(title);//有这个对象，返回对象值

console.log(className);//没有这个对象，返回null

2、setAttribute() 设置属性值

oP.setAttribute('id','box');//添加了一个id，

oP.setAttribute('class','active');//添加了一个class，

四、节点对象的三个重要属性

1、nodeName属性：节点名称，是只读

(1)元素节点的nodeName与标签名相同

(2)属性节点的nodeName与属性的名称相同

(3)文本节点的nodeName永远是 #text

(4)文档节点的nodeName永远是 #document

(5)注释节点的nodeName永远是 #comment

2、nodeValue属性：节点的值

(1)元素节点的nodeValue是 undefined 或 null

(2)文本节点的nodeValue是文本本身

(3)属性节点的nodeValue是属性自身

3、nodeType属性：节点的类型，是只读

以下常用的几种节点类型

元素类型：节点类型：

//元素 1

//属性 2

//文本 3

//注释 8

//文档 9----不算

4、获取三种重要属性的方法

我是一个文本节点

var oDiv = document.getElementById('box');

(1)元素节点

console.log(oDiv.nodeName);//DIV

console.log(oDiv.nodeValue);//null

console.log(oDiv.nodeType);//

(2)属性节点

console.log(oDiv.attributes);//获取属性集合(示例中设置了：id、title)

var attrNode = oDiv.attributes[0];//取出第一个

console.log(attrNode.nodeName + "|" + attrNode.nodeValue + "|" +attrNode.nodeType);//id|box|2

(3)文本属性

var textNode = oDiv.childNodes[0];//孩子节点(文本)

console.log(textNode.nodeName + "|" + textNode.nodeValue + "|" +textNode.nodeType);//#text|box|2

(4)注释节点

var commentNode = oDiv.childNodes[1];//孩子节点的第二个

console.log(commentNode.nodeName + "|" + commentNode.nodeValue + "|" +commentNode.nodeType);//#comment|我是注释|8

(5)文档节点

console.log(document.nodeType);//

五、节点对象的其他常用属性(寻找节点)

注意：换行符也算作一个文本节点

我是上一个兄弟

派大星

海绵宝宝

我是下一个兄弟

1、获取孩子节点 .childNodes()

var oFather = document.getElementById('father');//获取了div

console.log(oFather.childNodes);//所有的孩子节点

2、获取第一个孩子节点 .first

console.log(oFather.childNodes[0]);

console.log(oFather.firstChild);//第一个孩子节点

3、获取最后孩子节点 .last

console.log(oFather.childNodes[oFather.childNodes.length-1]);//孩子节点总长度-1(最后一个)

console.log(oFather.lastChild);//最后一个孩子节点

4、获取父级 .parentNode

console.log(oFather.parentNode);//父级标签body

console.log(oFather.parentNode.parentNode.parentNode);//可以一级一级往上面去找

5、获取兄弟标签

(1) .nextSibling 下一个兄弟标签

(2).previousSibling 上一个兄弟标签

console.log(oFather.nextSibling);//下一个兄弟标签

console.log(oFather.previousSibling);//上一个兄弟标签

六、节点对象兼容性问题(解决换行符问题)

我是上一个兄弟

派大星

海绵宝宝

我是下一个兄弟

var oFather = document.getElementById('father');

1、获取孩子标签

console.log(oFather.childNodes);//含有换行符

function get_childNodes(oFather){

var nodes = oFather.childNodes;//孩子节点

var arr = [];//保存已经获取的元素节点对象

for(var i = 0;i < nodes.length;i++){

if(nodes[i].nodeType ===1){

arr.push(nodes[i]);

}

return arr;

}

var childnodes = get_childNodes(oFather);

console.log(childnodes);//[p,p]两个p标签

2、获取下一个兄弟标签

console.log(oFather.nextSibling);//含有换行符

function get_nextSibling(oFather){

var x = oFather.nextSibling;//x的下一个兄弟

while(x && x.nodeType !=1){

x = x.nextSibling;//一直找下一个

}

return x;

}

var nn = get_nextSibling(oFather);

console.log(nn);

3、获取上一个兄弟标签

console.log(oFather.previousSibling);//含有换行符

function get_previousSibling(oFather){

var y = oFather.previousSibling;//x的上一个兄弟

while(y && y.nodeType !=1){

y = y.previousSibling;//一直找上一个

}

return y;

}

var aa = get_previousSibling(oFather);

console.log(aa);

七、元素节点对象的增删改查

派大星

var oDiv = document.getElementById('box');//拿到box这个标签元素

var oActive = document.getElementById('active');//拿到p 标签元素

1、增加 .createElement()

var newNode = document.createElement('p');

//创建一个 p 标签newNode

var newNode2 = document.createElement('p');

//创建一个新 p 标签newNode

var newNode3 = document.createElement('a');

//创建一个a 标签

2、插入

(1) .appendChild()

(2) .insertBefore(newNode,node) 前面是插入的节点，后面的是参考点

newNode.setAttribute('class','active');

//为 p 标签设置一个属性 class="active"

oDiv.appendChild(newNode);

//将 p 标签插入到 box 标签中的 p 标签后面

oDiv.insertBefore(newNode2,oActive);

//将 p 标签插入到 box 标签中的 p 标签前面，第一个参数是新插入的节点，第二个参数是参考的节点

3、插入文本

(1)innerHTML = 'xxx' (常用)

(2) innerText = ‘xxx’

//冗余代码

var textNode = document.createTextNode('海绵宝宝');//创建一个文本节点 textNode

newNode.appendChild(textNode);//将文本textNode 插入到 p 标签newNode中

newNode2.innerHTML = '海绵宝宝';

//直接调用 .innerHTML 属性替代上面代码

newNode.innerHTML = '章鱼哥';

//甚至可以插标签(既能渲染文本也能渲染标签)

newNode.innerText = '章鱼哥';

//变成文本的属性(只能渲染文本)没有了链接属性

newNode3.innerHTML = '百度一下';

newNode3.setAttribute('href','http://www.baidu.com');

4、删除 .removeChild()

oDiv.removeChild(oActive);//删除

5、替换 .replaceChild()

oDiv.replaceChild(newNode3,oActive);

//第一个参数是新的节点，第二个参数是要被替换的节点

6、释放对象

newNode = null;

样式设置方法

派大星

var para = document.getElementById('box');

一、直接调取 Style 属性(优先级最高)

console.log(para.style);//查看所有的style属性

para.style.backgroundColor = 'black';

para.style.color = 'white';

para.style.width = '250px';

para.style.height = '250px';

para.style.textAlign = 'center';

para.style.lineHeight = '250px';

para.style.fontSize = '30px';

二、设置一个类名，再来进行设置(使用最多)

para.setAttribute('class','active');

.active{

background-color: black;

color: white;

font-size: 30px;

width: 250px;

height: 250px;

text-align: center;

line-height: 250px;

}

事件介绍以及事件的使用方法

一、事件介绍

1、鼠标单击事件：onclick

2、鼠标经过事件：onmouseover

3、鼠标移开事件：onmouseout

4、光标聚焦事件：onfocus

5、光标失焦事件：onblur

6、文本框内容选中事件：onselect

7、文本框内容改变事件：onchange

8、网页加载事件：onload

二、onclick:鼠标单击事件

1、设置一个盒子

2、盒子样式

#box{

width: 100px;

height: 100px;

background-color: red;

}

3、两种函数的使用

//1.1 匿名函数(推荐使用)

oDiv.onclick = function(){

alert('触发了派大星');

}

//1.2 设置一个函数名也是可以的

function add(){

alert('触发了派大星');

}

oDiv.onclick = add

//2、直接在标签里面设置

function add(){

alert('触发了海绵宝宝');

}

4、鼠标点击切换红蓝

var isBlue = true;//设置一个值

oDiv.onclick = function(){

//this 指向了当前的元素节点对象

// console.log(this);

if(isBlue){

this.style.backgroundColor = 'blue';

isBlue = false;//变化

}else{

this.style.backgroundColor = 'red';

isBlue = true;//变化

}

三、鼠标经过和移开事件(悬浮)

1、过程演示

//找开关

//摁一下

//灯亮了

2、创建一个盒子

3、设置样式

#box{

width: 200px;

height: 200px;

background-color: red;

}

4、找到触发事件对象

var oDiv = document.getElementById('box');

(1)鼠标滑过事件 .onmouseover

oDiv.onmouseover = function(){

// 3、事件处理程序

this.style.backgroundColor = 'green';

}

(2)鼠标移开事件 .onmouseout

oDiv.onmouseout = function(){

// 3、事件处理程序

this.style.backgroundColor = 'red';

}

四、表单控件聚焦和失焦事件

1、设置两个框

用户名:

密码:

2、用户名聚焦 .onfocus

var userName = document.getElementById('username');//拿到用户名标签

var newNode = document.createElement('span');//创建一个span

userName.onfocus = function(){

newNode.innerHTML = '请输入用户名';

newNode.setAttribute('class','text');

userName.parentNode.appendChild(newNode);

//将span插入到用户名标签的父级后面

}

3、用户名失焦 .onblur

userName.onblur = function(){

newNode.innerHTML = '请输入正确的用户名';

newNode.setAttribute('class','text');

userName.parentNode.appendChild(newNode);

}

五、内容选中和内容改变事件

1、设置一个文本框和一个表单

请填写个人简介，字数不少于200000字

2、拿到文本框和表单标签

var textArea = document.getElementsByTagName('textarea')[0];

var inputObj = document.getElementsByTagName('input')[0];

3、内容被选中 .onselect

textArea.onselect = function(){

console.log('内容被选中');

}

4、内容被改变 .onchange

inputObj.onchange = function(){

console.log('内容被改变');

}

5、正在被实时改变 .oninput

inputObj.oninput = function(){

console.log('正在被实时改变');

}

六、窗口加载事件

1、js 加载顺序(自上而下)

//设置延迟

setTimeout(function(){

var oDiv = document.getElementById('box');

oDiv.onclick = function(){

this.innerHTML = '海绵宝宝';

}

},0)

2、等待文档元素加载完成才会调用 onload()

window.onload = function(){

var oDiv = document.getElementById('box');

oDiv.onclick = function(){

this.innerHTML = '章鱼哥';

}

派大星

XXGK！

SVG DOM常用属性和方法介绍(1)

12.2 SVG DOM常用属性和方法介绍将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...

前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

block(代码块)的介绍以及使用方法和变量之间的关系

http://blog.csdn.net/menxu_work/article/details/8762848 block(代码块)的介绍以及使用方法和变量之间的关系 block(代码块)的介绍以及使 ...

JS操作DOM元素属性和方法

Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

【转】【Android UI设计与开发】第07期：底部菜单栏(二)Fragment的详细介绍和使用方法

原始地址:http://blog.csdn.net/yangyu20121224/article/category/1431917/1 由于TabActivity在Android4.0以后已经被完全弃 ...

JS-DOM ～ 03&period; 子节点的操作、style&period;样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children ...

react-native热更新之CodePush详细介绍及使用方法

react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新co ...

随机推荐

百度CDN 网站SSL 配置

百度CDN SSL配置步骤一般从SSL提供商购买到的证书是CRT二进制格式的. 1. 将 CRT 导入到IIS中, 然后从IIS中导出为PFX格式 2. 下载openssl,执行下面命令提取用户证 ...

[转载]查看基于Android 系统单个进程内存、CPU使用情况的几种方法

转载自: http://www.linuxidc.com/Linux/2011-11/47587.htm 一.利用Android API函数查看1.1 ActivityManager查看可用内存. A ...

清理java环境

system32中存在3个java*.exe文件,分别是: c:/windows/system32/java.exe c:/windows/system32/javaw.exe c:/windows/ ...

python基础(二)- 字符串

一.运算符 1.结果是值: 算术运算赋值运算 2.结果是布尔值: 比较运算:> < == >= <= != <> 逻辑运算:and or ...

Zabbix实战-简易教程(1)--总流程

序玩zabbix已经几年了,一直想分享一些相关的使用经验和心得,但是总以各种借口而拖延,最近准备重新整理,记录一些实际工作环境中的示例,一方面希望能够帮助正在学习或者正在寻找这方面资料的朋友,另一方 ...

基于 CentOS 搭建 FTP 文件服务

https://www.linuxidc.com/Linux/2017-11/148518.htm

js的继承方式分别适合哪些应用场景？

一.原型链利用 Person.prototype = new Animal("Human") 实现继承: static式继承.能继承Animal.prototype.不可多重继承 ...

10&period;C&num;知识点&colon;操作XML

知识点目录==========>传送门 XML是什么就不用说了文本标记语言. 主要纪录如何对XML文件进行增删改查. Xml的操作类都存在System.xml命名空间下面. 应用型的直接上代码 ...

03&colon; KindEditor (HTML可视化编辑器)

目录: 1.1 kindEditor常用配置参数 1.2 kindEditor下载与文件说明 1.3 kindEditor实现上传图片.文件.及文件空间管理 1.1 kindEditor常用配置参数返 ...

Kettle 数据抽取

1.创建数据库连接 2.建立转换 3.指定源数据库和目标数据库的字段映射一定要在「输出」中勾选「指定字段」,然后点按钮「Get All fields」,再「Enter mapping」,在弹出窗口映 ...

娜娜和琳达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5DOM红蓝盒子,DOM介绍以及使用方法

DOM的基本讲解一、DOM(Document Object Model)文档对象模型1、有属性有方法var person = {name:'派大星',fav:function(){}}2、js中对象分类三种(1)用户定义对象(2)内建对象 Array Date Math (内置)(3)宿主对象3、Model Map(地图)(1)把 DOM 看做一颗“树”(2)DOM 把文档看做一颗“家谱树”par...
复制链接

扫一扫