javascript其他操作_row.atrributes["onkeypress"]-优快云博客

JavaScript分为 ECMAScript，DOM，BOM

一、BOM

1.1. window对象

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象

1.navigator

navigator.appName		// Web浏览器全称
navigator.appVersion	// Web浏览器厂商和版本的详细字符串
navigator.userAgent		// 客户端绝大部分信息
navigator.platform		// 浏览器运行所在的操作系统

2.screen

screen.availWidth	// 可用的屏幕宽度
screen.availHeight	// 可用的屏幕高度

3.history

window.history 包含浏览器的历史

history.forward()	// 前进一页
history.back()		// 后退一页

4.location *****

window.location对象用于获取当前页面的地址

location.href		// 获取当前url
location.href = "http://www.baidu.com"	// 跳转到百度
location.reload()	// 重新加载页面

5.弹出框

javascript中有三种消息框：警告框、确认框、提示框

警告框

alert("提示信息");

确认框

confirm("你确定吗？")

用户点击确认，返回true，点击取消，返回false
3. 提示框

prompt("提示信息"[,"默认值"]);

可以获取用户输入内容

6.计时器 *****

setTimeout()、clearTimeout()
一段时间后做一些事情

var t = setTimeout("js语句",毫秒) // js语句一般是匿名函数，或者函数名
cleartTimeout(t)	// 取消计时任务

setInterval()、clearInterval()
每隔一段时间做一些事情

var t = setInterval("js语句",毫秒)	//语句一般是匿名函数，或者函数名
clearInterval(t)		// 取消计时任务

二、DOM

在这里插入图片描述

文档节点（document）：代表整个文档
元素节点（element）：代表一个元素
文本节点（text）：代表元素的文本
属性节点（atrribute）：代表一个属性
注释节点（comment）：注释

2.1.查找标签

1.直接查找

document.getElementByID("id")			// 通过id获取一个标签
document.getElementsByClassName("c1")	// 通过class获取一组标签
document.getElementsByTagName("h1")		// 通过标签名获取一组标签

2.间接查找

var id1 = document.getElementByID("id")
id1.parentElement			// 获取父节点标签
id1.children				// 所有子标签
id1.firstElementChild		// 第一个子标签
id1.lastElementChild		// 最后一个子标签
id1.nextElementSibling		// 下一个兄弟标签
id1.previousElementSibling	//上一个兄弟标签

2.2.节点操作

1.创建节点

var a = document.createElement("a");

2.添加节点

somenode.appendChild(newnode)			// 追加一个子节点
somenode.insertBefore(newnode,位置节点)	// 把新的节点添加到位置节点前

3.删除节点

somenode.removeChild(节点)	// 删除父节点里的某个节点

4.替换节点

somenode.replaceChild(newnode,某个节点)	//父节点里找到某个节点，替换成newnode

5.属性节点

获取文本节点

var divEle = document.getElementById("d1")
divEle.innerText	// 获取所有标签内的文本内容，包括子孙标签
divEle.innerHTML	// 获取标签内所有的内容

设置文本节点的值

var divEle = document.getElementById("div")
divEle.innerText = "xxx"
divEle.innerHTML = "<h1>xxx</h1>"

属性操作

var divEle = document.getElementById("div")
divEle.setAttribute("age",18)
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 标签自带属性可以直接获取和设置
imgEle.src
imgEle.scr = "xxx.jpg"

6.获取值操作

可以获取到用户输入或者选择类型的标签

var input1 = document.getElementById("i1")
input1.value

7.class类的操作

var divEle = document.getElementById("div")
divEle.className				// 获取标签所有类型（字符串）
divEle.classList				// 获取标签所有类型（数组）
divEle.classList.add("c")		// 添加类名
divEle.classList.remove("c")	// 删除类名
divEle.classList.contains("c")	// 判断类名c是否存在标签中
divEle.classList.toggle("c")	// 切换，存在该类名删除，不存在添加

8.指定css操作

var divEle = document.getElementById("div")
divEle.style.backgroundColor = "red"

1.对于没有中横线的CSS属性一般直接使用style.属性名即可
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

三、事件

1.事件种类

onclick			当用户点击某个对象时调用的事件句柄。
ondbclick		当用户双击某个对象时调用的事件句柄。

onfocus			元素获得焦点。               
onblur			元素失去焦点。	应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange		域的内容被改变。	应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown		某个键盘按键被按下。	应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress		某个键盘按键被按下并松开。
onkeyup			某个键盘按键被松开。
onload			一张页面或一幅图像完成加载。
onmousedown		鼠标按钮被按下。
onmousemove		鼠标被移动。
onmouseout		鼠标从某元素移开。
onmouseover		鼠标移到某元素之上。

onselect		在文本框中的文本被选中时发生。
onsubmit		确认按钮被点击，使用的对象是form。

2.绑定方式

方式一(不常用，不符合松耦合原则)

<div id="d1" onclick="changeColor(this);">点我</div>  
<script>  
  function changeColor(ths) {  
    ths.style.backgroundColor="green";
  }
</script>

方式二

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵"; // 哪个标签触发的这个事件，this就指向谁
  }
</script>