DOM 元素对象解析
DOM 元素对象解析
nth—child (n) : 当前容器所有子元素中的第N个 .box li : nth-child(1) :
BOX容器所有子元素中的第一个,并且标签名为li的
nth-of-type(n) : 先给当前容器按照某一个标签名进行分组,获取分组中的第N个 .box li : nth-of-type(1)
: 先获取BOX中所有的LI , 在获取LI中的第一个
.box li : nth-of-type(even)
//EVEN 偶数 ODD : 奇数
` .box li : nth-of-type(3n+1){ color:red}`
` .box li : nth-of-type(3n+2){ color:green}`
` .box li : nth-of-type(3){ color:blue}`
复制代码
获取页面中的DOM元素
document.getElementById
在整个文档中 , 通过元素的ID属性值 , 获取到这个元素对象
getElementById是获取元素的方法 , 而document限定了获取元素的范围 ,我们把这个称之为 : "上下文[context]"
var oBox = document.getElementById('box');
1.通过getElementById 获取的元素是一个对象数据类型的值(里面包含很多内置的属性)typeof oBox => "object"2.分析包含的属性className : 存储的是一个字符串,代表当前元素的样式类名id : 存储的是当前元素的ID值 (字符串)innerHTML : 存储当前元素中所有的内容 (包含HTML标签)innerText : 存储当前元素中所有的文本内容(没有元素标签)onclick :元素的一个事件属性 , 基于这个属性 , 可以给当前元素绑定点击事件onmouseover : 鼠标滑过事件onmouseout : 鼠标离开事件style : 存储当前元素所有的"行内样式"值(获取和操作的都只能是写在标签上的行内样式 ,无法基于这个属性获取到)
<div style='xxx:xxx'> ···
//=> 想要修改BOX的样式
// 1.通过STYLE修改行内样式
oBox['style']
oBox.style.backgroundColor = 'pink'
复制代码
//2.基于CLASS-NAME属性修改BOX的样式类,从而改变样式 oBox['className'] += 'bgColor';
思考题 : 获取扩展 , 如何获取当前元素的所有样式 (不管是写在哪的 ? ) style只能获取写在行内上的
[context].getElementsByTagName
在指定的上下文中 , 通过元素的标签名获取一组元素集合 上下文是我们自己来制定的
var oBox = document.getElementById( ' box ' );
var boxList = oBox.getElementByTagName('li')
console.dir(boxLixt);
var boxLixt = oBox.getElementsByTagName('li');
1.获取的结果是一个元素集合(HTMLCollection) , 首先它也是对象数据类型的,结构和数组非常相似(数字作为索引 , length 代表长度) , 但是不是数组 , 我们把它叫做 "类数组"boxList[0] 获取当前集合中的第一个LI (通过索引获取到具体的某一个LI即可)boxList.length 获取集合中LI的数量2.集合中的每一项存储的值又是一个元素对象 (对象数据类型 , 包含很多内置的属性,例如 : id/className...)boxList[1].style.color = 'red'; 修改集合中第二个LI的文字颜色var boxList = oBox.getElementsByTagName('li');
//=>2.搞个循环来完成我们的样式赋值
for(var i = 1; i<boxList.length;i+=2){//=>索引时技术代表偶数行if(i%2!==0){boxList[i].style.backgroundColor = 'pink'boxList[i].className += 'bgColor' ; }
}//=> 回去后实现隔三行变色
3
复制代码
函数
在 JS 中 , 函数就是一个方法( 一个功能体 ) , 基于函数一般都是为了实现某个功能
var total = 10;
total+=10;
total = total/2;
total = total.toFixed(2); //=>保留小数点后边两位
(数字由一个方法toFixed 用来保留小数点后面的位数)····
在后续的代码中 , 我们依然想实现同样的操作(加10除以2) ,我们需要重新编写代码
var total = 10;
total+=10;
total = total/2;
total = total.toFixed(2); //=>保留小数点后边两位···这样的方式会导致页面中存在大量冗余的代码 , 也降低了开发效率 ,如果我们能把实现这个功能的代码进行 "封装" , 后期需要这个功能执行即可 , 这样就好了!**`函数诞生的目的就是为了实现封装`** : 把实现一个功能的代码封装到一个函数中 ,后期想要实现这个功能 ,只需要把函数执行即可这样就好了!**`函数诞生的目的为了实现封装`** : 把实现一个功能的代码封装到一个函数中 ,后期想要实现这个功能 , 只需要把函数执行即可 , 不必要再次编写重复的代码 ,起到了**`低耦合高内聚(减少页面中的冗余代码, 提高代码的重复使用率)`**的作用
复制代码
function fn(){var total =10;total+=10;total/=2;total = total.toFixed(2);console.log(total);}fn();fn();
···
想用多少次 , 我们就执行多少次函数即可
ES3标准中:
//=》创建函数
function 函数名([参数]){函数体 : 实现功能的JS代码
}
//=>把函数执行
函数名(); =====
ES6标准中创建箭头函数 :
let 函数名(变量名)=([参数])=>{
函数体
}
函数名();let fn = ()=>{let total = 10;···
}
fn();
复制代码
函数作为引用数据类型中的一种 ,它也是按照引用地址来操作的 , 接下来我们学习一下 , 函数的运行机制
var obj = {name:'培训',age:9
}function fn(){var total =10;total+=10;total/=2;total = total.toFixed(2);console.log(total);}fn();
【创建函数】
1.函数也是引用类型 , 首先会开辟一个新的推内存 , 把函数体中的代码当作 '字符串' 存储到内存中 (对象向内存中存储的是键值对)
2.把开辟的堆内存赋值给函数名(变量名)此时我们输出fn(切记不是fn()) 代表当前函数本身
如果我们执行fn() , 这是把函数执行
所以是否加小括号是两种不同本质的操作【函数执行】
目的 : 把之前存储到堆内存的代码字符串变为真正的JS代码自上而下执行, 从而实现应有的功能1.函数执行 , 首先会形成一个私有的作用域(一个供代码执行的环境 ,也是一个栈内存)
2.把之前在堆内存中存储的字符串复制一份过来 ,变为真正的JS代码 ,再开辟的作用域中自上而下执行
复制代码
函数中的参数
参数是函数的入口 : 当我们在函数中封装一个功能 , 发现一些原材料不确定 , 需要执行函数的时候用户传递进来才可以 , 此时我们就基于参数的机制 ,提供出入口即可
//=>此处的参数叫做形参 : 入口 ,形参是变量(n/m就是变量)
function sum(n,m){//=> n和m分别对应要求和的两个数字var total = 0;total = n+m;console.log(total);
}//=>此处函数执行传递的值是实参 : 实参是具体的数据值
sum(10,20);
sum(10); //=> n=10 m=undefined
sum(); //=> n和m都是undefined
sum(10,20,30); //n=10 m=20 30没有形参变量接收
复制代码
这是我建的qq群里面有很多资源,希望能和大家一起学习讨论共同进步!
这是群号:778734441
这是跟着周啸天老师一起学的笔记,后期我还会分享更好的资料给大家,希望大家多多支持,我会发布很多优秀的作品出来的!!!
DOM 元素对象解析相关推荐
- 渲染元素中动态创建div来渲染html dom组件,是需要将element元素对象return返回的(也支持直接返回ht的widget、ui等视图view组件),刷新重新加载图纸
如下面所示,动态创建的div,设置了id后,浏览器也能看到,但是刷新(并非刷新浏览器页面)重新加载图纸,div会被自动移除及重新创建,合情合理,因为是随着渲染元素机制走的. 所以在创建div之前判断浏 ...
- html属性是dom属性吗,HTML DOM 属性 对象
HTML DOM 属性 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是 节点: 文档是文档节点 所有 HTML 元素是元素节点 所 ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
- js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
- jquery遍历元素对象each方法
each方法每循环一次都能从元素集合获取一次索引号和DOM元素对象,直到获取完为止
- 获取dom元素的方法
在 JavaScript 中,获取 DOM 元素的方式有多种.下面列出了一些常用的方法: 1.用 document.getElementById() 方法:该方法需要传入一个参数,即要获取元素的 id ...
- JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- pythonxml解析拿到控件坐标_Python解析xml中dom元素的方法
本文实例讲述了Python解析xml中dom元素的方法.共享给大家供大家参考.详细实现方法如下: 复制代码 代码如下: from xml.dom import minidom try: xmlfile ...
- 前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递
HTML DOM简介和新特性 1,HTML DOM简介 核心DOM中,提供的属性和方法,已经可以操作网页了,为什么还要HTML DOM? 如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分 ...
- JavaScript DOM / BOM (查询获取元素对象【增、删、改、查】 )以及常见鼠标事件
1.查询获取元素(查) 1.1.根据ID获取 document.getElementById('id'); 1.2.根据标签名获取1(使用 getElementsByTagName() 方法可以返回带 ...
最新文章
- AI一分钟|阿里AI鉴黄师或将取代人类;特斯拉私有化空头潜在利润超10亿美元
- ef mysql 插件_EF Core 插件 —— ToSql
- Appium 与 Chromedriver
- 送一些豆瓣 8.9 分优质书,啃完拿下 BAT 高薪 offer 不是梦!
- linux查看指定用户的所有进程
- 搭建hadoop和spark分布式环境
- 保温杯都这么给力了,你的 Bug 就不能少点?
- java国际化 英语的标识符_(转)Java 国际化
- 来自糯大米童鞋的 纯 golang 的 mp4 读写库。
- SSD固态硬盘4K对齐一键分区
- C++ Opencv 安装配置
- [ 英语 ] 语法重塑 之 英语学习的核心框架 —— 英语兔学习笔记(1)
- 信息科技岗笔试笔记:互联网大厂笔试基础题目(三)
- 【读书笔记】计算广告(第3部分)
- vue播放flv视频流
- JavaScript 根据身份证号获取年龄
- android设备id完美解决方法,如何在Android中获取唯一的设备硬件ID?
- Unity2021 Inventory(背包)系统学习记录
- 产品有感之拼多多——社交更优惠的电商平台
- 计算机软件分类系统软件和,计算机化系统软件分类和验证
热门文章
- Jsonp+spring mvc
- 关于浏览器存储问题理解
- Android layoutInflate.inflate 方法具体解释,removeView()错误解决
- 读书笔记-1-《书都不会读,你还想成功?》
- 未能加载文件或程序集Microsoft.ReportViewer.WebForms
- ISA 发布内网 NLB
- thinkphp生成php文件,thinkphp使用buildHtml生成静态文件的方法
- php mysql占位符_php中的占位符
- 双代号网络图节点时间参数_双代号网络图的绘制与6个时间参数的计算,一篇全学会!...
- 从Slice_Header学习H.264(三.2)--相关细节之 参考图像列表