美文网首页
JS dom操作学习

JS dom操作学习

作者: 大白熊_8133 | 来源:发表于2018-11-07 14:26 被阅读0次

    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()

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

    相关文章

      网友评论

          本文标题:JS dom操作学习

          本文链接:https://www.haomeiwen.com/subject/xlzmxqtx.html