js03基础

最新推荐文章于 2023-03-01 20:55:19 发布

AC_QI

最新推荐文章于 2023-03-01 20:55:19 发布

阅读量655

点赞数 1

分类专栏：学习部分

本文链接：https://blog.csdn.net/m0_60297110/article/details/119832767

版权

学习部分专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.6.1 getElementsByTagName( ) 6

1.6.2连续打点... 6

1.7对应与排它... 7

1.8样式的计算... 8

1.dom

1.1概述

我们前面学习的都是JS语言核心部分，也就是ECMAScript。

一般都是在控制台、输出语句里操作，JS还包括

DOM和BOM。

DOM (Document Object Model,文档对象模型)描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大地降低了编程难度。

DOM对很多东西做了抽象，提供了丰富的APl（方法）:取得元素、css样式、事件、运动、元素尺寸位置、节点操作等等。

//操作dom

var app = document.getElementById('app');

//修改内容

app.innerHTML = '你是好人';

//获取

console.log(app.innerHTML);

1.2HTML操作

document:表示文档(表示整个页面)对象。

document对象具有页面几乎所有的方法或者属性。

读取: document.title 页面的标题。

赋值:使用=进行赋值。

一般操作元素都是从获取元素开始的。.

获取元素的方法: getElementByld（）通过id属性获取元素对象。

通过id属性得到的数据类型是对象

通过元素对象操作属性

读取:可以通过对象的点方法得到属性名。

设置:用 = 进行赋值

点语法只能读取或者设置元素的自带的属性，不能设置读取元素的自定义属性。

//修改标题

document.title = 'good man ';

//获取

console.log(document.title);

console.log(document.head);

console.log(document.body);

//获取h1元素//用这个获取元素更专业

var app = document.getElementById('app');

console.log(app);

//早期为元素创建id时，会在js中创建一个同名变量

//获取属性

console.log(app.id);//app

console.log(app.style);//

//获取自定义属性

console.log(app.class);//undefined

console.log(app.demo);//undefined

console.log(app.color);//undefined

//如果想要通过点语法访问以上属性，需要改名

//class→className；for→ htmlFor；

//rowspan→rowSpan；colspan→colSpan

//修改属性，通过赋值 = ，一半点语法修改

1.3属性操作

属性操作方法

读取: getAttribute() 可以读取元素自带属性或者是自定义属性

设置: setAttribute() 设置元素自带属性或者是自定义属性

点语法和getAttribute()，setAttribute()区别:

1点语法只能读取或者设置元素的自带有属性，getAttribute()，setAttribute()可以读取元素自带属性或者是自定义属性

2点语法操作有些属性名需要改名字，getAttribute()， setAttribute()不用改名，是什么就直接书写什么。

class→className for→ htmlFor

rowspan→rowSpan colspan→colSpan

3 style属性：通过点语法得到的style对象，而getAttribute()得到的是字符串。

4点语法得到style可以继续打点。而getAttribute()得到的是字符串不能继续打点调用属性。

总结:除了自定义属性使用getAttribute()，其他所有情况都使用点语法。

//获取元素

var app = document.getElementById('app');

//可以通过点语法设置属性

console.log(app.className);

// getAttribute

console.log(app.getAttribute('class'));

//获取style

console.log(app.style);//点语法获取的是对象，大量的属性

console.log(app.getAttribute('style'));//单一指定属性，字符串

//获取自定义属性，color，点语法无法获取

//getAttribute可以直接获取

console.log(app.getAttribute('color'));//red

//其他属性没有区别

//修改属性

app.className = 'deemm213 asd';

app.setAttribute('class', 'asdasfvx');

//自定义属性

app.setAttribute('color', 'asdasfvx');

//新增属性

app.setAttribute('coloasdr', 'qaqaqq');

app.title = "hello";//点语法可以添加自身拥有的属性

app.setAttribute('title', 'good man')

//修改样式

//点语法要转成驼峰式命名，是在原有的基础上修改属性

app.style.fontSize = '100px';

//按照css规则书写，覆盖原有的

app.setAttribute('style', 'font-size:100px')

1.4样式操作

css操作就是更改元素的样式。

通过点语法的style得到对象(包含css所有的样式)。

能够继续打点调用style属性。

属性名:如果是单一属性需要改为驼峰命名法(删除横线，将横线后面的单词首字母大写)。

读取:通过点语法直接获取style对象中的css样式

设置:使用 = 进行设置，将新的属性值属性在= 右侧。必须用双引号包裹。

属性值的写法:原来css属性值怎么写，js就怎么写。

使用点语法设置css样式，是书写行内的样式。

还可以通过setAttribute修改样式，修改的时候，会覆盖原有的行内式样式，属性值是css样式的字符串（遵守css规则）。

1.5DOM事件

事件监听:我们计算机在解析我们JS代码的时候，会去看某一些元素身上是否添加了事件。随时监听这些事件有没有被触发,如果触发就立即执行相应的行为。

onclick 单击 ondblclick 双击

onmouseenter鼠标进入 onmouseleave 鼠标离开

onmousedown鼠标按下 onmouseup 鼠标弹起

onfocus 获取焦点 onblur 失去焦点

onload 加载完毕之后

元素绑定事件:元素事件名 = fn。可以绑定匿名函数或者函数名(千万不要在函数名后面书写小括号)。

注意:

我们在body中书写js时，需要将js书写在所有html元素之后。当html元素加载完毕之后在执行js。

如果js书写在head标签中，必须书写onload事件，window.onload表示当html元素加载完毕之后执行内部的语句。

//注意：如果要在此处创建js，必须书写onload事件，

//window.onload表示当html元素加载完毕之后执行内部的语句

//window是一个全局对象，包含dom一些API，例如可以通过window

//监听页面加载完成//即页面加载完成再加载此处js

window.onload = function () {

}

</script>

</head><body>

<h1 id="app" style="color:green;background-color: pink;" class="demo" color="red">hello qaqq</h1>

//绑定事件监听用户与页面的交互

var app = document.getElementById('app');

var inp = document.getElementById('inp');

//监听点击h1元素//设置的是回调函数

//给一个对象设置多个同名属性（多次绑定），

//会导致后面的覆盖前面的

app.onclick = function () {

console.log('click h1');

}

//双击

function fn() {

console.log('click h1 2423');

}

app.ondblclick = fn;//注意不要加括号让他执行

//鼠标的移入与移出

app.onmouseenter = fn;

app.onmouseleave = fn;

//监听输入框获取焦点

inp.onfocus = function () {

console.log('获取焦点');

}

inp.onblur = function () {

console.log('失去获取焦点');

}

</script></body>

1.6批量操作

1.6.1 getElementsByTagName( )

getElementByld()和getElementsByTagName()都是兼容IE低版本。全线兼容。

getElementsByClassName()不兼容IE低版本。

getElementsByTagName( ) 通过元素的标签名得到元素。

</section>

//获取页面中所有div

var divs = document.getElementsByTagName('div');

console.log(divs);

//遍历div

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

//类数组对象，可以通过每一个索引值访问类数组成员

console.log(divs[i]);

}

得到的是页面上所有的同种标签组成的类数组对象。

类数组中保存的每一个数据也是元素对象。

得到的类数组对象具有length属性。表示保存的同种标签的元素个数。

可以通过数组的索引值得到任何一个对象。

不管元素嵌套多深，getElementsBy TagName(" p")也可以查找。

类数组对象保存数据的顺序和标签之间的嵌套没有关系，和标签首次出现的顺序有关。

1.6.2连续打点

getElementByld()只能被document调用。

//getElementById只能被document调用

var div3 = document.getElementById('div3');

console.log(div3);

getElementsByTagName(),其它元素对象可以打点调用该方法。还可以将多条语句连续书写。

通过getElementsByTagNam(")得到的一定是类数组对象，即使只有一个元素也是类数组对象。想得到该元素对象，仍然需要书写索引值。

批量操作事件

通过getElementsByTagName()得到的是类数组对象，我们可以通过批量操作的方式给数组每一个元素添加相同事件。

案例:

给元素批量添加点击事件，触发事件时弹出该元素对象的索引值

注意:事件回调函数中，存储索引值有两种方式

1.利用IIFE和闭包实现对数据的存储

2.通过this访问元素自身，再获取数据

1.7对应与排它

我们一般习惯用一个元素去控制其它元素。根据它们之间的联系(索引值相同)进行书写。

排他:选中的元素改变其它元素，让其他元素变成原状。

根据这一思想我们可以实现-些交互功能，如:选项卡的实现。

[点击此处链接到选项卡]

核心算法：

.app .header span.choose {

color: red;

}

.app .body .choose {

display: block;

}

//绑定事件

for (i = 0, len = spans.length; i < len; i++) {

//设置索引值

//一个类数组，用自身来存储数据，当 i = 0 时，

//类数组第 1 个数据，存储 0 ，当 i = 1 ，时

//类数组第 2 个数据，存储 1 ...

//spans[i].onclick,表示，当第 i 个元素被点击时

//触发条件

spans[i].index = i;

//绑定事件

spans[i].onclick = function () {

//排它法，设置样式

//清除所有

for (var j = 0; j < len; j++) {

//清除每一个span的类

spans[j].className = '';

// spans[j].style.color = 'black';

}

//返回被点击的span的类，即给被点击的span

//添加一个class=choose的属性

//通过之前给choose设置的style的color属性

//来给当前span添加color属性

spans[this.index].className = 'choose';

//对p使用排它

//注意：此处是另外一组对象了，记得重新设置var

for (var k = 0, klen = ps.length; k < klen; k++) {

//清除所有p的类

ps[k].className = '';}

//设置特殊的：对应法

ps[this.index].className = 'choose';

1.8样式的计算

计算后的样式:指的是HTML元素在css各种选择器综合作用下，得到的最终样式。

高级浏览器的方法: window.getComputedStyle()，该方法接收一个要进行样式计算的元素，并返回一个可以进行属性查询的接口。返回接口提供了一个名为getPropertyValue()的方法， 用于检索特定样式属性的计算样式。getPropertyValue方法接收css属性名称，而不是驼峰式的名称。getPropertyValue()可以不写， 直接用方括号来检索属性也可以。

getComputedStyle:得到的样式是一个对象，包含了所有的css样式。是window对象的方法。

注:也可以直接使用 [ ] 继续得到具体的计算后的属性值。(中括号中可以使用驼峰也可以使用短横)

getPropertyValue:得到的是具体的某一个属性的值。 参数和css书写一样，不能使用驼峰

IE6,7,8方法

低版本浏览器不认识getComputedStyle。

IE低版本计算后的方法，currentStyle.(对象打点调用currentStyle,继续打点调用具体的某个计算后的样式属性)。currentStyle也可以直接使用 [ ] 得到计算后的样式属性。

注意:不管是中括号还是点语法都只能用驼峰命名法。(使用方法和style非常类似)

//此方法获取的是元素，元素，行内的元素

var app = document.getElementById('app');

console.log(app);

//获取样式

//此种方法用style获取样式，只是获取行内的样式

console.log(app.style);//"color"

console.log(app.width);//undfined

//获取全部的样式，通过全局方法getComputerStyle

var result = getComputedStyle(app);

//注意：获取指定样式时，不能驼峰命名

//注意：[] 中括号可以直接获取指定属性值,随便命名

console.log(result.getPropertyValue('width'));//200px

console.log(result.getPropertyValue('height'));//200px

console.log(result.getPropertyValue('color'));//rgb(255, 0, 0)

console.log(result['color']);//rgb(255, 0, 0)

console.log(result['backgroundColor']);//rgb(0, 128, 0)

1.9 能力检测

不管是低版本还是高级浏览器都可以正常输出计算后的样式。需要进行能力检测(就是判断认不认识window. getComoutedStyle)

#app {

font-size: 40px;

width: 200px;

height: 200px;

background-color: green;

border-bottom-color: pink;

border-bottom-width: 20px;

border-bottom-style: solid; } </style></head><body>

<div id="app" style="color: red;">hello </div>

/*封装一个getStyle方法，可以在不同浏览器下获取样式

*@obj-- 元素对象；

*@key-- 样式的属性名称

*return（返回值）获取的样式

**/

function getStyle(obj, key) {

//能力检测：判断浏览器的能力，能做什么就做什么

//浏览器是否支持，getComputerStyle方法，

//支持就使用

//加上window，是为了保证

//在没有其他浏览器上，即使没有这个方法（getst），也不会报错

if (window.getComputedStyle) {

//获取对象中的样式，返回key

//就用这玩意儿，法一

return getComputedStyle(obj)[key];

//法二，如果使用下面这种方式，需要转换成横线法

//如：boderLeftColor => boder-left-color

//注意：（[]）是要捕获它

//特别注意：

//此处，function里的形参，需要按需填写，写的时候就测试

//看看输出的是什么玩意儿

// key = key.replace(/[ A-Z]/g, function ($1) {

// //返回的是

// // $1 = $1.toString();

// return '-' + $1.toLowerCase();

// })

// return getComputedStyle(obj).getPropertyValue(key);

} else {

//垃圾ie判断法

var style = obj.currentStyle;

//判断有样式可以获取，

if (style) {

//返回样式

//由于ie的 [ ] 只支持驼峰命名，所以需要转换，横杠法去转换

//如：boderLeftColor <= boder-left-color

key = key.replace(/(-[a-z])?/g, function (match, $1) {

return ($1 || '').toUpperCase();

console.log(1, $1);

})

return style[key];

} else {

//如果没有样式，则提示用户

alert('垃圾电脑，这都不支持，快换了')

}

//测试

//获取元素

var app = document.getElementById('app');

alert(getStyle(app, 'color'));

alert(getStyle(app, 'fontSize'));

alert(getStyle(app, 'font-size'));

</script>

</body>

</html>

AC_QI

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js03基础

目录1.dom.. 11.1概述... 11.2HTML操作... 21.3属性操作... 31.4样式操作... 41.5DOM事件... 41.6批量操作... 61.6.1 getElementsByTagName( ) 61.6.2连续打点... 61.7对应与排它... 71.8样式的计算... 81.dom1.1概述我们前面学习的都是JS语言核心部分，也就是ECMAScript。一般都是在控制台、输出语句里操作，JS还包括DO.
复制链接

扫一扫