JS DOM学习笔记

最新推荐文章于 2022-08-08 20:15:33 发布

做枚温婉的妹纸吧哈哈

最新推荐文章于 2022-08-08 20:15:33 发布

阅读量620

点赞数

分类专栏： web前端之js和jquery 文章标签： dom javascript

本文链接：https://blog.csdn.net/VivianHope/article/details/46446689

版权

web前端之js和jquery 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

这篇文章是自己在看了《JavaScript高级程序设计》之后做的摘要性质的笔记，以便以后查询和巩固用。
Array.prototype.slice()方法可将一个arguments对象转换为数组，也可将由结点的childNodes属性获取的类数组对象NodeList转换为数组：

var new nodesArr = Array.prototype.slice.call(NodeList,0).
nodesArr instanceof Array; // true

JavaScript中所有结点都继承自Node类型。Node类型规定了基本的属性和方法。

结点属性：

nodeType、nodeName、nodeValue;
childNodes（返回一类数组对象，可通过下标访问其中的某个元素）、parentNode、previousSibling、nextSibling、lastChild、firstChild；
ownerDocument:指向结点所在文档的文档结点（document结点）。

hasChildNodes()方法用于判断是否有孩子结点。比判断childNodes.length更方便。
文本结点属于标签结点的子结点（属性结点不属于）。在IE中子节点不包括子结点间的空白符，而其他浏览器中会将结点间的空白符看做文本结点，包括在子结点中。因此，在对子节点执行某项操作时，可先检查结点类型。

操作方法

appendChild()：返回新增的结点。如果新增结点已经存在于DOM树中，则转移到新的位置。？？？
parentNode.insertBefore(新结点，参照结点)

一. Document类型

该类型表示文档，浏览器中document对象是HTMLDocument(继承自Document)的一个实例，表示整个html页面。document对象是window对象的一个实例。

属性
document.documentElement属性指向html结点
document.body指向body结点
document.doctype指向<!DOCTYPE>
document.domain：可将子框架的该属性设置为相同值，则可通信，互相访问到对方的JavaScript对象。（来自不同的子域无妨通信）。但设置一次无法再进行设置。
方法

getElementsByTagName()：返回一个HTMLCollection对象。该对象可通过[]或item()方法访问其中位于Index处的某个元素。HTMLCollection对象还有个namedItem(“”)方法，可获取其中name属性为某个值的元素，也可通过下标[“”]来获取。
getElementsByName()：获取对用name属性的标签，返回一个HTMLCollection对象。
某个Element对象也可调用上面几个方法，搜索的起点是当前元素。
write方法：如果在页面加载完成后调用该方法会重写整个页面内容。

二. Element类型

nodeName为标签名，nodeValue为null。
可通过nodeName或tagName属性访问标签名，但后者在html文档中是返回大写的字符串，而在XML中是返回和文档中相同的。若不确定脚本是在哪种类型的文档中执行，可将通过tagName获取的标签转换为小写。
html元素由HTMLElement类型（继承自Element类型）表示，具有以下属性：

id、title…
className：用于指定CSS特性，没有用class是因为这是ECMAScript的保留字。
text属性用于获取和设置结点的文本值，在chrome和Firefox中应使用textContent。通过该方式也和下面所讲得创建文本结点后再添加一样，都作为了某个元素的子结点。
补充：元素结点中设置文本值的方法：
(1)创建一个文本结点，然后作为子节点插入元素结点中
(2)通过元素结点的innerHTML设置
(3)通过text属性设置
(4)表单元素可通过属性value设置

可通过“.”即对象属性访问方式获取或修改属性，或通过下列方法：get/set/removeAttribute().
属性名称不区分大小写。
可自定义属性，自定义的属性不可通过“.”方式访问，只能通过getAttribute等方法访问和创建。
一般情况下，自定义属性用方法访问，公认属性用“.”方式访问。（onclick等事件属性、style属性的特殊性：用两种方式访问的结果不一样，建议使用”.“方式访问）
ele.attributes属性返回由ele的所有属性结点组成的集合。需要遍历某个元素的所有属性时可用到该属性。由于IE7及更早版本会返回未指定的特性，因此可通过判断ele.attributes[index/’属性名’].specified属性值是否为true，确定有无在代码中指定该属性。

在IE7及更早版本中创建元素的问题可通过参数书写为完整的标签格式来解决。

三 Text类型

nodeName为#text，nodeValue为文本内容。
文本结点属于包含其的元素结点的子节点，可通过ele.firstChild等方式访问文本结点。
可通过nodeValue属性访问或修改文本结点中包含的文本。
文本结点包含了appendData(text)等方法对文本结点进行相应操作。例如splitText(offset)方法用于分割文本结点，前一个结点从起始位置到offset的前一个位置，后一个文本结点从offset开始到结束位置。后一个结点作为新的文本结点返回，其父节点仍为原来的。该方法常是从文本结点中提取数据的一种常用DOM解析技术。

创建文本结点：createTextNode(“文本内容”)。
默认情况下一个元素只有一个文本结点，当然也可以创建出多个文本结点，这些相邻的文本结点间显示的时候没有空格，直接相连。Node类型有一个normalize方法，可对元素结点调用该方法，即可把所有相邻的文本结点合并为一个。

四 Attr类型

其父节点为null，nodeName为属性名称，nodeValue为属性值。属性结点虽然看做结点，但不是DOM树的一部分。很少直接引用属性结点，常通过set/set/removeAttribute方法来操作
属性结点有三个属性：
name同nodeName值相同
value同nodeValue相同
specified是个布尔值，用于区分属性是在代码中指定的还是默认的。
var attr = document.createAttribute(‘属性名’)可创建属性结点；
ele.setAttributeNode(attr)可将属性结点追加到某个元素上
ele.getAttributeNode(‘name’).value获取某个属性结点的值

动态生成样式

不是在加载文档时候就有的样式，而是后面生成的

<script type="text/javascript">
//动态载入外部样式表
function loadStyle(url){
    var link = document.createElement("link");
    link.rel="stylesheet";
    link.type="text/css";
    link.href=url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
//动态生成样式
var css = "body {background:green;}";
function loadStyleStirng(css){
    var style = document.createElement("style");
    style.type="text/css";
    try{
        style.appendChild(document.createTextNode(CSS));
    }catch(ex){
        style.styleSheet.cssText=css;//IE浏览器不允许访问style标签的子结点，可通过其属性styleSheet中包含的cssText属性访问，该属性接收CSS代码
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}
</script>

动态生成脚本

<script type="text/javascript">
//动态加载外部脚本
function loadScript(url){
    var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

//动态插入脚本
var script=document.createElement("script");
script.type="text/javascript";
var code = "function(){ sayHi(){alert('Hello')}}";
try{
    script.appendChild(document.createTextNode(code));
}catch(ex){
    script.text=code;  //IE浏览器不允许访问script结点的子节点，通过text属性来设置
}
</script>

动态生成表格

    var table=document.createElement("table");
    table.border=1;
    var tbody=document.createElement("tbody");
    table.appendChild(tbody);
    //创建行和行内的单元格
    tbody.insertRow(0);
    tbody.rows[0].insertCell(0);
         tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
    document.body.appendChild(table);