JavaScript_DOM

林一怂儿

于 2018-08-04 00:44:45 发布

阅读量799

点赞数

分类专栏： H5 文章标签： JavaScript

H5 专栏收录该内容

39 篇文章 3 订阅

订阅专栏


//The DOM (Document Object Model)(文档对象模型)
//常见选择方法
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()

element.childNodes 		//returns an array of an element's child nodes.
						//返回元素的子节点数组
element.firstChild 		//returns the first child node of an element.
						//返回元素的第一个子节点
element.lastChild  		//returns the last child node of an element.
						//返回元素的最后一个子节点
element.hasChildNodes 	//returns true if an element has any child nodes, otherwise false.
						//如果元素有子节点，则返回true，否则为false。
element.nextSibling 	//returns the next node at the same tree level.
						//返回同一树级别下的下一个节点
element.previousSibling //returns the previous node at the same tree level.
						//返回同一树级别上的前节点
element.parentNode 		//returns the parent node of an element.
						//返回元素的父节点
//创建元素
element.cloneNode() 			   //clones an element and returns the resulting node.
					               //克隆一个元素并返回所产生的节点
document.createElement(element)    //creates a new element node. 
								   //创建一个新元素节点
document.createTextNode(text)      //creates a new text node.
							       //创建一个新文本节点
element.appendChild(newNode)       //adds a new child node to an element as the last child node.
								   //将一个新子节点添加到元素作为最后一个子节点
element.insertBefore(node1, node2) //inserts node1 as a child before node2.
								   //在node2之前插入node1作为子
//删除元素
removeChild(node)//删除子元素

//更换元素
element.replaceChild(newNode, oldNode)


//事件
onclick    //occurs when the user clicks on an element 
		   //当用户单击元素时发生
onload     //occurs when an object has loaded
		   //当对象加载时发生
onunload   //occurs once a page has unloaded(for <body>)
		   //页面卸载后发生（对于<body>）
onchange   //occurs when the content of a form element, the selection, or the checked state have changed
		   //(for <input>, <keygen>, <select>, and <textarea>)
		   //当表单元素的内容，选择或检查状态发生变化时发生
onmouseover//occurs when the pointer is moved onto an element, or onmouseover onto one of its children
		   //当指针移动到元素上或onmouseover移动到其子元素之一时发生
onmouseout //occurs when a user moves the mouse pointer out of onmouseout an element, or out of one of its children
		   //当用户将鼠标指针移出某个元素或从其某个子元素中移出时发生
onmousedown//occurs when the user presses a mouse button over an element
		   //当用户在元素上按下鼠标按钮时发生
onmouseup  //occurs when a user releases a mouse button over an onmouseup element
		   //当用户通过onmouseup元素释放鼠标按钮时发生
onblur     //occurs when an element loses focus
		   //当元素失去焦点时发生
onfocus    //occurs when an element gets focus
		   //当元素获得焦点时发生
		   
element.addEventListener(event, function, useCapture);
//The first parameter is the event's type (like "click" or "mousedown").
//The second parameter is the function we want to call when the event occurs.
//The third parameter is a Boolean value specifying whether to use event bubbling or event 
//第一个参数是事件的类型（如“点击”或“mousedown”）。
//第二个参数是我们想要在事件发生时调用的函数。
//第三个参数是一个布尔值，指定是使用事件冒泡还是事件
element.removeEventListener("mouseover", myFunction);