JavaScript操作DOM对象

操作DOM

DOM:Document Object Model (文本对象模型){

JavaScript操作DOM对象_第1张图片

}

节点和节点关系:{

JavaScript操作DOM对象_第2张图片

}

访问节点:{

使用getElement系列方法访问指定节点:{

getElementById()、getElementsByName()、getElementsByTagName()

}

根据层次关系访问节点:{

节点属性:

JavaScript操作DOM对象_第3张图片

element属性:

JavaScript操作DOM对象_第4张图片

兼容问题:

}

}

节点信息:{

JavaScript操作DOM对象_第5张图片

JavaScript操作DOM对象_第6张图片

}

操作节点:{

操作节点的属性

创建和插入节点

删除和替换节点

操作节点样式

获取元素的样式

操作节点的属性:{

getAttribute("属性名") :得到属性

setAttribute("属性名","属性值"):添加属性

}

创建节点:{

JavaScript操作DOM对象_第7张图片

}

删除和替换节点:{

JavaScript操作DOM对象_第8张图片

需要从先找到父类然后再从父类删除子类

}

}

style属性:{

语法:HTML元素.style.样式属性="值"

示例:

JavaScript操作DOM对象_第9张图片

该赋值样式是在行内进行赋值的
}

className属性:{

语法:HTML元素.className="样式名称"

示例:

JavaScript操作DOM对象_第10张图片

该样式是在类里进行赋值改变样式

}

获取元素的样式:{

{

语法:HTML元素.style.样式属性;

示例:alert(document.getElementById("cartList").display);

}

{

语法:document.defaultView.getComputedStyle(元素,null).属性;

示例:

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

alert(document.defaultView.getComputedStyle(cartList,null).display);(通用写法绝大部分浏览器可以兼容)

}

{

语法:HTML元素. currentStyle.样式属性;

示例:alert(document.getElementById("cartList").currentStyle.display);(兼容IE浏览器)

}

}

HTML中元素属性:{

元素属性应用:

JavaScript操作DOM对象_第11张图片

语法:

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

获取滚轮的垂直和水平滚动距离

var sTop=document.documentElement.scrollTop||document.body.scrollTop;

兼容写法

}

总结:{

JavaScript操作DOM对象_第12张图片

}

你可能感兴趣的:(javascript)