• JavaScript脚本化文档(Scripting Document)


    一、概述

    客户端Javascript的存在,是为了使静态的Html页面变成可交互的Web应用。可以脚本化Html页面的内容是JavaScript的核心目的。

    二、选择文档元素

    1、getElementByID();

    每个文档的元素都可以赋一个在文档范围内唯一的id属性。在微软IE8之前的浏览器,该方法还会去匹配name属性,然后返回匹配的元素。

    2、getElementsByName();

    3、getElementsByTagName();

    可以在document和element上调用

    4、getElementByClassName();

    可以在document和element上调用

    5、querySelector(),querySelectorAll()

    可以在document和element上调用,

    三、文档结构与遍历

    1、作为节点树:文档由节点组成,节点之间形成一棵树形的结构。文档对象,元素对象,文本对象都是节点。节点定义了以下重要属性:

    parentNode:父节点,如果没有返回null,比如document没有父节点

    childNodes:动态的子节点列表

    firstChild,lastChild:第一个,最后一个子节点,如果没有返回null

    nextSibling,previousSibling:下一个,上一个兄弟节点

    nodeType:document=9,element=1,text=3,comments=8,document fragment=11

    nodeValue:text或者comment节点的文本内容

    nodeName:标签名称,转换成了大写

    2、作为元素树:不考虑文档中的文本,抽取所有的元素作为一个树,元素对象的属性有:

    children:  子元素列表

    firstElementChild,lastElementChild:

    nextElementSibling,previousElementSibling

    childElementCount

    四、属性 Attribute

    1、Html 属性作为Element对象的属性

    html属性不区分大小写,但是element对象区分,所以html属性转为element属性,属性名要做相应变化。

    2、获取,设置,移除,判断是否存在某属性

    getAttribute,setAttribute,removeAttribute,hasAttribute

    3、html5中的dataset attribute

    4、属性作为节点:document.body.attributes.bgcolor, document.body.attributes["onload"]

    五、元素内容

    1、作为html

    innerHTML,outHTML,insertAdjacentHTML();

    2、作为纯文本

    textContent,innerText属性

    3、作为文本节点

    nodeValue,data属性

    六、创建,插入,删除节点

    1、创建

    createElement(),createTextNode(),createComment(),createElementNS(),createDocumentFragment()

    cloneNode(),importNode()

    2、插入

    appendChild(),insertBefore()

    如果插入的元素,在文档中已经存在,相当于把元素从原来的位置移动到插入的位置。

    3、删除和替换节点

    removeChild(), replaceChild()

    4、使用documentFragment

    一个新创建的documentFragment,是一个临时的节点容器,当把一个documentFragment插入到document中的时候,实际上是把documentFragment里的所有子节点当做一个整体插入的。

    七、文档和元素的图形化,以及滚动

    本节讨论文档元素的渲染,文档元素的位置通过像素坐标确定的。有2个坐标概念:文档坐标,和视图坐标。

    两套坐标系相差一个滚动条的位置。不同的浏览器获取滚动条位置的方法不一样。

    1、从元素获取位置:getBoundingClientRect(), getClientRects()

    2、从位置获取元素:elementFromPoint()

    3、滚动页面:window对象的方法:scrollTo(),scroll(),scrollBy(),scrollIntoView()

  • 相关阅读:
    Fiddler 抓包工具总结(转)
    JMS之ActiveMQ下载安装
    Centos中查询目录中内容命名ls
    JS解析Excel
    Echarts图表
    Oracle 控制语句
    时间日期的获取
    Random随机类(11选5彩票)BigInteger大数据类(华为面试题1000的阶乘)
    Java的析构函数System的finalize()
    JSP Standard Tag Library JSP标准标签库
  • 原文地址:https://www.cnblogs.com/winson/p/3423654.html
Copyright © 2020-2023  润新知