编程语言
首页 > 编程语言> > JavaScript-DOM

JavaScript-DOM

作者：互联网

简介

DOM：Document Object Model

节点

HTML 文档中的所有内容都是节点

document对象

常用属性

名称说 明
referrer返回载入当前文档的**URL**
URL返回当前文档的**URL**
document.referrer
document.URL
​

document常用方法

名称说 明
getElementById()返回对拥有指定id的第一个对象的引用
getElementsByName()返回带有指定名称的对象的集合
getElementsByTagName()返回带有指定标签名的对象的集合
write()向文档写文本、HTML表达式或JavaScript代码

节点的属性

属性名称描述
parentNode返回节点的父节点
childNodes返回子节点集合，childNodes[i]
firstChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild返回节点的最后一个子节点
nextSibling下一个节点
previousSibling上一个节点
var obj=document.getElementById("news");
    var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
    var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
    alert(str);

element属性

属性名称描述
firstElementChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild返回节点的最后一个子节点
nextElementSibling下一个节点
previousElementSibling上一个节点

节点的信息

 var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;
    var type2=nodes.firstChild.firstChild.nodeType;
    var name1=nodes.firstChild.firstChild.nodeName;
    var str=nodes.firstChild.firstChild.nodeValue;
    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;

操作节点

操作节点的属性

名称描述
getAttribute("属性名")获取属性值
setAttribute("属性名","属性值")设置属性值
  var ele=document.getElementsByName("book");
        var img=document.getElementById("image");
        if(ele[0].checked){
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            img.nextSibling.innerHTML="我和狗狗一起活下来";
        }
        else if(ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.nextSibling.innerHTML="灰霾来了怎么办";
        }

创建和插入节点

名称描述
createElement( tagName)创建一个标签名为tagName的新元素节点
A.appendChild( B)把B节点追加至A节点的末尾
insertBefore( A,B )把A节点插入到B节点之前
cloneNode(deep)复制某个指定的节点
  var ele=document.getElementsByName("book");
        var bName=document.getElementsByTagName("div")[0];
        if(ele[0].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            bName.appendChild(img);
        }
        else if(ele[1].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.setAttribute("onclick","copyNode()")
            bName.appendChild(img);

删除和替换节点

名称描述
removeChild( node)删除指定的节点
replaceChild( newNode, oldNode)属性attr用其他的节点替换指定的节点
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
​
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
​

操作节点样式

改变style属性

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

改变className属性

 document.getElementById("cart").className="cartOver";
 document.getElementById("cartList").className="cartListOver";
​

获取元素的样式

document.getElementById("cartList").display
document.getElementById("cartList").currentStyle.display

标签：img,DOM,JavaScript,setAttribute,getElementById,var,document,节点
来源： https://blog.csdn.net/qq_61181575/article/details/123174407