[学习笔记] 动态网页开发基础之JavaScript操作DOM对象

# 学习 # · 2020-08-07

一、DOM操作

1、DOM:文档对象模型,是基于文档编程的一套API接口。

2、DOM操作分类:DOM Core(核心)、HTML-DOM、CSS-DOM。

3、节点:

(1)整个文档是一个文档节点。

(2)每个HTML标签是一个元素节点。

(3)包含在HTML元素中的文本是文本节点。

(4)每个HTML属性是一个属性节点。

(5)注释属于注释节点。

4、节点关系:父(parent)、子(child)、同胞(sibling)

(1)在节点数中,顶部节点被称为根(root)。

(2)除根节点外,每个节点都有父节点。

(3)一个节点可以拥有任意数量的子节点。

(4)同胞节点是拥有相同父节点的节点。

5、使用gerElement系列方法访问指定节点:getElementById()、getElementsByName()、getElementsByTagName()。

6、根据层次关系访问节点:

(1)节点属性:

    var obj = document.getElementById("text");
    obj.parentNode;    //返回节点的父节点
    obj.childNodes;    //返回子节点集合childNodes[i]
    obj.firstChild;    //返回节点的第一个子节点
    obj.lastChild;    //返回节点的最后一个子节点
    obj.nextSibling;    //下一个节点
    obj.previousSibling;    //上一个节点

(2)element属性:

    var obj = document.getElementById("text");
    obj.firstElementChild;    //返回节点的第一个子节点
    obj.lastElementChild;    //返回节点的最后一个子节点
    obj.nextElementSibling;    //下一个节点
    obj.previousElementSibling;    //上一个节点

7、节点信息:

(1)nodeName:节点名称,元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName是#text,文档节点的nodeName是#document。

(2)nodeValue:节点值,文本节点的nodeValue是文本,属性节点的nodeValue是属性值,文档节点和元素节点不可用。

(3)nodeType:节点类型,其中元素element(1),属性attr(2),文本text(3),注释comments(8)、文档document(9)。


操作节点

1、操作节点的属性:

    var obj = document.getElementById("text");
    obj.getAttribute("属性名");    //获取属性的值。
    obj.setAttribute("属性名","属性值");    //设置属性的值。当属性不存在时,返回null

2、创建和插入节点:

    var obj = document.getElementById("text");
    var label = document.createElement("标签名");    //创建一个新元素节点
    obj.appendChild(label);    //把label节点追加到obj节点的末尾
    var copy = label.cloneNode(boolean);    //复制lebel节点,参数为布尔值,true表示赋值该节点及该节点的所有子节点。
    insertBefore(copy,obj);    //把copy节点插入到obj节点之前

3、删除和替换节点:

    var obj = document.getElementById("text");
    obj.removeChild(node);    //删除obj下的指定节点
    obj.parentNode.removeChild(obj);    //删除obj自身节点
    var oldobj = document.getElementById("old");
    var newobj = document.getElementById("new");
    obj.replaceChild(newobj,oldobj);    //用obj节点下的newobj节点替换oldobj节点
    obj.parentNode.replaceChild(newobj,obj);    //用newobj节点替换obj自身节点

4、操作节点样式:

(1)style属性:

    HTML元素.style.样式属性 = "值";
    document.getElementById("info").style.fontSize = "25px";

(2)className属性:

    HTML元素.className = "样式名称";
    document.getElementById("info").className = "infoCss";

5、获取元素的样式:

    HTML元素.style.样式属性;    //只能获取到内联样式的属性值
    document.getElementById("info").display;

    HTML元素.currentStyle.样式属性;    //局限于IE浏览器
    document.getElementById("info").currentStyle.display;

    document.defaultView.getComputedStyle(元素,null).属性;
    var info = document.getElementById("info");
    document.defaultView.getComputedStyle(info,null).display;

获取元素位置

1、属性语法:

//标准浏览器
document.documentElements.scrollTop;

//Chrome
document.body.scrollTop;

2、HTML中元素的属性:

(1)offsetLeft:返回当前元素左边界到它上级元素的左边界的距离,只读属性。

(2)offsetTop:返回当前元素上边界到它上级元素的上边界的距离,只读属性。

(3)offsetHeight:返回元素的高度。

(4)offsetWidth:返回元素的宽度。

(5)offsetParent:返回元素的偏移容器,即对最近的动态定位的包含元素的引用。

(6)scrollTop:返回匹配元素的滚动条的垂直位置。

(7)scrollLeft:返回匹配元素的滚动条的水平位置。

(8)clientWidth:返回元素的可见宽度。

(9)clientHeight:返回元素的可见高度。

如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/61/

评论