JS dom操作学习

1 HTML DOM

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
HTML文档的嵌套元素在DOM以树状对象表示。
HTML文档的树状结构包含表示HTML标签或元素和表示文本字符串的节点,也可能包含表示HTML注释的节点。

1 DOM操作HTML

js能够改变页面中的所有HTML元素
js能够改变页面中所有HTML属性
js能够改变页面中所有的CSS样式
js能够对页面中所有事件作出反应

1.改变HTML输出流

注意,绝对不要在文档加载完成后使用document.write()会覆盖该文档

2.寻找元素

通过id找到HTML元素

var secction1=document.getElementById("section1")

通过标签名找到HTML元素

获得包含所有<span>元素的只读的类数组对象,返回一个nodeList对象

var spans=document.getElemenstByTagName("span")

在NodeList中返回的元素按照文档中的顺序排序,返回第一个元素则用

var firstpara=document.getElemenstByTagName("p")[0]

传递"*"元素将获得一个代表文档中所有元素的NodeList对象

通过类选取元素

和标签名方式差不多

var warnings=docuement.getElementsByClassName("warning")

3.使用属性:innerHTML

可以获取全部HTML元素
也可以用来改变HTML元素

4.改变HTML属性

HTML元素有一个标签和一组称为属性的名/值组成,例如<a>元素定义了一个超链接,有href属性。
对于通用属性,直接使用即可,例如查询一张图片的URL

var image=document.getElementById("myimage");
var imgurl=image.src

对于非标准的HTML属性,定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性

var width=parseInt(image.getAttribute("width"))
image.setAttribute("class","thumbnail);

属性值都被看做字符串,getAttribute()不返回数值,布尔值或对象
element类型还定义了两个相关的方法,hasAttribute()和removeAttribute(),它们用来检测命名属性是否存在和完全删除属性,比如disabled属性

5.Attr节点属性

Node类型定义了attribute属性,针对非Element对象的任何节点,只读

document.body.arrtribute[0] //<body>元素第一个属性
document.body.attribute.backgroundcolor //<body>元素backgroundcolor
document.body.attribute["ONLOAD"] //<body>元素onload属性

2.DOM操作CSS

通过DOM对象改变CSS值

document.getElementById(id).style.property=new style

3.DOM EventListener

1.addEventListener()

接收三个参数第一个是要注册处理程序的事件类型,第二个时指定类型的事件发生时应该调用的函数,最后是布尔值,通常为false

2.removeEventListener()

同样有三个参数,常用于临时注册事件的处理程序函数,不久后删除它。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,067评论 0 7
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 3,947评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,969评论 1 45
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,736评论 0 8
  • 再过两天,我就可以去成都学习了,对于这次学习,我是非常期待的,因为正面管教,在我的育儿路上,真的让我的生活有了翻天...
    Emma燕子阅读 1,794评论 2 0