document对象
document对象是window对象的一个属性,表示整个HTML页面。它是DOM的编程入口。
document获取元素的方法
方法名 | 返回值 | 描述 |
getElementById(string) | Element | 根据元素的id属性获取元素 |
getElementsByTagName(string) | NodeList | 根据元素的标签名获取元素 |
getElementsByName(string) | NodeList | 根据元素的name获取元素 |
NodeList操作
获取个数:nodeList.length;获取指定索引位置的元素nodeList.item(index)
Document操作元素
创建元素、添加元素:ducument.createElement(tagName) ,appendChild(node)
<script type="text/javascript"> window.onload=function(){ var div01Element=document.getElementById("div01"); var newDivElement=document.createElement("div"); newDivElement.innerHTML="刚添加的节点"; div01Element.appendChild(newDivElement); } </script>
Element操作元素属性
直接使用element.attrName的方式操作属性值
<!--这种方式只能操作HTML标准规定的属性,不能操作自定义属性--> var attrValue = element.attrName;//获取属性值 element.attrName = attrValue;//给属性赋值 element.className ;//获取元素的class属性的值。因为class是关键字,所以操作class属性时使用className代替
在js中,操作checkbbox,radio的checked属性,selected属性时,使用true或false,表单元素的disable属性也是如此
通过方法操作属性(可操作自定义属性)
String getAtrribute(String attrName)获取属性值
void removeAttribute(String attrName)删除指定属性
void setAttribute(String attrName,String attrValue)修改/添加属性
Element操作元素的字节点
子节点包括子元素和元素文本内容
element.getElementByTagName()根据子元素的标签名子元素
element.innerHTML以字符串形式操作子节点
element.insertBefore(newNode,node)在指定子节点前插入新子节点
element.appendChild(newNode)在最后追加子节点
element.parentNode获取元素的父元素
操作元素样式
element.style.proName的方式可以直接操作某个样式属性。如:element.style.backgroundColor="grey";
删除元素内容
element.removeChild(node);删除子节点
element.attrName = null;删除属性
element.innerHTML = null;删除文本内容和子元素
事件冒泡
事件冒泡:当若干嵌套的元素"同时"被触发某个事件时,最内层元素的事件最先被触发,事件依次往外传递。
JQuery
$对象是JQuery的编程入口,它是JQuery的核心对象。$对象也是一个函数对象,可用$()的形式调用。$函数可以把若干个DOM对象包装进一个对象,这个对象称为jQuery对象,jQuery对象可以看成数组对象。JQuery对象不能再调用DOM对象的方法,DOM对象也不能调用jQuery对象的方法。
jQuery事件处理
文档加载完成事件
$(document).ready(function(){alert("xx")});或者$(function(){});