Dom基础语法总结 | 易学教程

浏览器对象模型：window{document、frame[]、history、location、navigator }，document-----DOM风格文档对象模型

采用驼峰命名法
// 获取节点
// 1.通过id获取  只有id获取的是dom节点，其他获取的都是集合
var oDiv1 = document.getElementById("div1");
console.log(oDiv1);
// 2.通过calss获取
var myh1 = document.getElementsByClassName("myh1");
myh1[1].style.fontSize="25px";
// 3.通过name获取
var oForm=document.getElementsByName("my-form");
console.log(oForm);
// 4.通过标签获取
var oH1= document.getElementsByTagName("h1");
console.log(oH1[2]);
/*如果获取的是集合，则要通过集合的下标获取节点对象*/

获取节点的方法
var div = document.querySelector("div+div");  //获取兄弟节点
console.log(div);
var div1 = document.querySelector("#mydiv h1:nth-child(2)"); //参数是css选择器，会返回第一个满足条件的节点对象
var div2 = document.querySelectorAll("#mydiv h1:nth-child(2)"); //返回值是所有满足条件的节点对象，如果只有一个满足，也返回的是集合

替换节点
function myReplace(){
    var div = document.querySelector("#mydiv h1:nth-child(1)");
    var mydiv =  document.getElementById("mydiv");
    var myP = document.createElement("p");
    var myTextNode = document.createTextNode("我是新创建的p标签")
    myP.append(myTextNode)  //添加新的儿子
    mydiv.replaceChild(myP,mydiv)
    //父亲节点.replaceChild(替换的新节点，要替换的节点) 
}

function replaceEle(){
    //  1.用页面中已存在的节点来替换
    var _sourceNode = document.getElementsByTagName('div')[0];
    var _newtNode = document.getElementsByTagName('h1')[0];
    var _parentNode = document.getElementsByTagName('section')[0];
    _parentNode.replaceChild(_newtNode,_sourceNode);
   /*当我们在网页中，已经存在的一个节点，去替换另外一个已存在的节点时，
   实际上执行的是剪切+替换的功能*/

    //    2.用新创建的节点来替换
    var _createNewNode = document.createElement("h3");
    _createNewNode.innerHTML = "我是h3";
    _parentNode.replaceChild(_createNewNode,_sourceNode);
}

添加节点
function myappend(){
    //父节点.insertBefore(1.新节点，2.插入在哪个节点之前) 
}

克隆节点
function myclone(){
    var newNode = mycloneDiv.cloneNode(true);
    //参数为true，会将子节点也复制进去，为false，只复制该节点
}

删除节点
function myDel(){
    var div1 = document.getElementById("div1");
    var div = document.getElementById("div");
    div.removeChild(div1)
}

获取父节点
function myparentNode(){
    div.parentNode
}

来源：CSDN

作者：beibei_niao

链接：https://blog.csdn.net/beibei_niao/article/details/103646535

标签

var模型

dom