JS17

元素的内容

        innerHTML

        outerHTML

作为纯文本的元素内容

        textContent IE9+

        innerText --忽略多余的空白

文本节点的方法

1、appendData() 向文本节点追加内容

2、deleteData(start,length) 删除文本部分内容

3、insertData(start,string) 向文本中插入部分内容

4、replaceData() 替换文本内容

5、substringData() 截取文本内容

元素节点操作

1、节点的创建

        document.createElement();

2、节点的添加

        appendChild() --在元素后面添加

        insertBefore(new,old) --在元素指定的位置添加

3、删除节点

        removeChild() --使用父级删除子级

4、替换节点

        replaceChild(newnode,oldnode)

5、克隆节点

        cloneNode()

        true --克隆当前节点以及其所有的后代节点

        false --只克隆当前节点

DocumentFragment节点

        文档碎片(临时容器)  文档片段

        document.createDocumentFragment();

        documentFragment节点不属于文档树

    应用实例： 元素反转

                var frag = document.createDocumentFragment();

                while(container.lastChild){

                          frag.appendChild(container.lastChild);

                }

                container.appendChild(frag);

        完成反转后frag将不存在文档中

元素宽高 位置 滚动等尺寸

1. 元素坐标

        offsetLeft 距离已定位的父级left值

        offsetTop 距离已定位的父级top值

        offsetParent 得到最近定位的父级元素

        clientLeft 得到边框的尺寸

        clientTop 得到边框的尺寸

2. 元素尺寸

        getBoundingClientRect() 尺寸对象

        offsetWith 盒子模型的宽（包含边框）

        offsetHeight 盒子模型的高(包含边框)

        clientWidth 盒子模型的内容宽(不包含边框)

        clientHeight 盒子模型的内容高(不包含边框)

        scrollWidth 盒子模型的宽(计算超出内容)

        scrollHeight 盒子模型的高(计算超出内容)

3.滚动

        scrollLeft

        scrollTop

4. 通过坐标点获取元素

       document.elementFromPoint(100,100);

5. 获取html文档的宽高

       document.documentELement.offsetWidth; --视口宽度

       document.documentElement.clientHeight; --视口高度

       document.documentElement.scrollHeight; --内容高

DOCUMENT对象

        每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

1、URL 获取当前页面的URL --只读

2、domain 获取域名 --只读

3、referrer 获取上一个页面的地址 --只读

4、title 页面title

5、location 主机 --只读

6、lastModified 最后一次修改时间

7、cookie 获取或设置cookie

方法：

1、document.write();

2、document.getElementById();

.......

Table表格

table属性

1、cells 返回包含所有单元格的数组

2、rows 返回包含所有行的数组

        -tab.rows[0].cells[1]

3、border 返回或设置table边框

4、caption 对表头的引用

5、cellPadding 设置或返回内容与单元格边框间距

6、cellSpacing 设置或返回单元格间距

7、id 设置或返回表格的id

8、width 设置或返回表格的width

table 方法

1、createCaption 创建一个表头

        --var s = tab.createCaption();s.innerHTML=‘’;

2、deleteCaption 删除表头

        --tab.deleteCaption();

3、createTHead() 在表格中创建一个空的 tHead 元素。

4、deleteTHead() 从表格删除 tHead 元素及其内容。

5、createTFoot() 在表格中创建一个空的 tFoot 元素。

6、deleteTFoot() 从表格删除 tFoot 元素及其内容。

7、insertRow() 在表格中插入一个新行。

8、deleteRow() 从表格删除一行。--传入行的索引

tr 的属性

1、cells 返回包含行中所有单元格的一个数组。

2、rowIndex 返回该行在表中的位置。

tr 的方法

1、deleteCell() 删除行中的指定的单元格。

2、insertCell()在一行中的指定位置插入一个空的元素。

td、th的属性

        cellIndex 返回单元格在某行的单元格集合中的位置。

实例：

将文件(data.html)中模拟的两条数据遍历到表格中

css样式的查询

        element.style.attrname --需要将样式写在标签的style中

        window.getComputedStyle(element) --低版本IE不支持

        element.currentStyle[attrname] --仅IE