Javascript

js

本文主要是介绍js,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1、DOM

1.1 文档对象模型

DOM树

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中所有标签都是元素,DOM中使用element表示
  • 节点:网页中所以内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

DOM把以上内容都看作是对象

2、获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素

我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取
2.2 根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

HTML DOM 定义了多种查找元素的方法,除 getElementById() 外,还有 getElementsByName() 和getElementsByTagName()。

不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

2.3 根据标签名来获取元素

使用getElementByTagName()方法可以返回带有标签名的对象集合。

document.getElementByTagName("标签名");
遍历

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

console.log(lis);

}

注意:

  • 返回的是获取过来元素对象的集合,以伪数组的形式存储
  • 我们想要依次打印里面的元素对象可以采取遍历的方式
  • 如果页面中只有一个li标签,返回的还是一个伪数组的形式
  • 如果页面中没有这个元素,返回的是一个空的伪数组

还可以获取某个父元素内部所有指定标签名的子元素

2.4 使用html5新增的方法获取

1.document.getElementsByClassName('类名') ; //根据类名获取某些元素集合

2.document.querySelector(''选择器“); //根据指定选择器返回第一个元素对象

3.document.querySelectorAll(''选择器“); //根据指定选择器返回所有元素对象

4.获取body元素

document.body;

5.获取html元素

document.documentElement;

3、事件基础

概述:事件是可以被JavaScript侦测到的行为,简单理解就是触发响应的一种机制

事件是由三部分组成 :事件源、事件类型、事件处理程序

(1).事件源:事件被触发的对象 谁 按钮 btn

(2).事件类型:如何触发,什么事件,比如鼠标单击事件(onclick),还是鼠标经过,还是键盘按下

(3).事件处理程序 通过一个函数赋值的方式 完成

btn.onclick = function(){

​ alert('点秋香');

}

执行事件的步骤:

1.获取事件源

2.注册事件(绑定事件)

3.添加事件处理程序(采取函数赋值形式)

4、操作元素

element.innerText

起始位置到终止位置的内容,但除去html标签,同时空格和换行也会去掉

element.innerHtml

起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

innerText与innerHtml的区别:

1、innerText不识别html标签,非标准,会去除空格和换行,

innerHtml识别html标签 W3C标准,同时保留空格和换行

2、这两个属性是可读写的,可以获取元素里面的内容

操作样式属性

我们可以通过js修改元素大小、颜色、位置等样式

element.style 行内样式操作

element.className 类名样式操作

注意:

1、js里面的样式采用驼峰命名法 比如fontSize、backgroundColor

2、js修改style样式操作,产生的是行内样式,css权重比较高

3、使用element.style获得元素样式如果样式较少或者功能简单的情况下使用

4、我们可以通过修改元素的calssName更改元素样式,适合于功能较多或者功能复杂的情况

5、因为class为保留字,因此使用className来操作元素类名属性

6、calssName会直接更改元素的类名,会覆盖原先的类名

总结:

排他思想:

首先先排除他人,然后才设置自己的样式,这种排除他人的思想我们称为排他思想

鼠标经过:onmouseovser

鼠标离开:onmouseout

自定义属性的操作:

1.获取属性值

element.属性 获取属性值

element.getAttribute('属性'); //get是获取 attribute是属性的意思

<div id="demo">

</div>

<script>
	var div = document.querySelector('div');
    console.log(div.id);   //demo
</script>
这篇关于js的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!