JavaScript

获取元素

根据id获取

var div1 = document.getElementById("box1");

通过类名获取元素

var p1Arr = document.getElementsByClassName("p1");

伪数组定义：

1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法

伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组

通过标签名获取

var tag1 = document.getElementsByTagName("div");

通过name名获取

通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

通过选择器的querySelectorAll获取元素

事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

事件触发多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

补充：绑定事件的是事件对象

      触发事件的是事件源对象

1. 非表单元素的属性操作

href、title、id、src、className width height等等

1. 添加src属性值显示图片

imgBox.src = "images/jie.jpg";

1. 改变图片大小

imgBox.width = 750;

    imgBox.height = 500;

1. 通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

1. 通过类名改变宽度

  imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名！

1. 隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

1. this的指向问题
   • •  普通函数中，this指向window
     •   构造函数中，this指向实例化对象
     •   对象函数中，this指向当前的对象
     •  事件函数中，this指向事件源
2. 表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性

checked

1. InnerText

返回被选元素的文本内容

 var p1 = document.getElementById("p1");

  console.log(p1.innerText);

设置被选元素的文本内容

btn1.onclick = function () {

    // 设置文本

    p1.innerText = "文本改变了哈";

    console.log(p1.innerText);

  }

阻止a链接跳转

三种写法

<!-- 第一种方法 -->

  <a href="https://www.baidu.com" οnclick="alert('单击链接了！'); return false">百度一下</a>

  <a href="https://www.baidu.com" οnclick="fn1(); return false">百度两下</a>

 function fn1() {

    alert("单击链接了哈");

  }

第一种缺点：代码不分离，不符合低耦合，高内聚的规范

<!-- 第二种方法 -->

  <a href="https://www.baidu.com" οnclick="return fn2();">百度三下</a>

 function fn2() {

    alert("单击百度三了哈！");

    return false;

  }

第二种代码 缺点同上

  <!-- 第三种方法 -->

  <a href="https://www.baidu.com" id="link">百度四下</a>

  document.getElementById("link").onclick = function () {

    alert("单击百度四了哈！");

    return false;

  }

鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发

onblur失去焦点事件：在鼠标光标失去焦点时触发。

onclick单击事件：在鼠标指针单击时触发

ondblclick双击事件：在鼠标光标双击时触发。

onkeydown：键盘按下

onkeyup:键盘抬起 

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

innerText和textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持

设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

(2)、innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

1. 元素的属性操作

1. 、自定义属性

元素除了本身的属性之外可以设置自定义属性

(2)、获取属性

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值

(3)、设置属性

setAttribute("属性的名字","属性的值");

元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性

1. 、移除属性

 removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性

1. 元素样式设置的几种方式

能用switch语句实现的就一定可以使用if实现，但是反之不一定，如果是区间范围就采用if，如果是等值判断使用switch

1. 对象.style
2.  对象.className
3. 对象.setAttribute("style")
4. 对象.setAttribute("class")
5. 对象.style.setProperty("CSS属性","CSS属性值")
6. 对象.style.cssText