复习DOMJQuery

Posted 2020-10-24 西科之巅、不可能

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(){});