最常用的js DOM方法小结

来源：互联网发布：矩阵分析第四章答案编辑：程序博客网时间：2024/06/05 02:21

最常用的js DOM方法小结

/** * Created by lhy on 2017/7/5. */window.onload = function () {    var tag = document.getElementsByTagName("li")//得到一个dom元素的数组,可以用数组方法访问    var fst = document.getElementById('firstLi');    var parent = document.getElementsByTagName("ul")[0];    tag[0].style.backgroundColor = 'red';    //创建元素插入文本节点    var ele = document.createElement("Li");    var text = document.createTextNode("可怜天上月，一夕成环，夕夕都成玦");    ele.appendChild(text);    //insert    parent.insertBefore(ele,tag[2]);//父元素上面调用（新元素，参考元素）    //copy    var newEle = ele.cloneNode(true);　　//复制某个节点  参数：是否复制原节点的所有属性    parent.appendChild(newEle);    //delete    //兼容性考虑，先判断节点的nodeType==1    setTimeout(function () {        parent.removeChild(tag[3]);        console.log(tag);        tag[2].style.color = 'aqua';    },5000);    //操作文本节点，可以提取编辑删除文本中的指定内容，这里不展开   // 属性操作   /*    getAttribute(name)*/    var img = document.getElementById('img');    img.setAttribute('src','不思量，自难忘');    var src = img.getAttribute("src");    fst.innerHTML = "下面图片的src是"+src;    //查找节点    //parentObj.firstChild;　　//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用     //parentObj.firstChild.firstChild.....    //parentObj.lastChild;　　//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用           //parentObj.childNodes;   //获得节点的所有子节点，然后通过循环和索引找到目标节点    //curtNode.previousSibling;  //获取已知节点的相邻的上一个节点    //curtNode.nextSibling;　　  // 获取已知节点的下一个节点    //childNode.parentNode       //获取父亲节点    //parentObj.lastChild.lastChild.....    /*********高度相关***************/    var hh = document.getElementById("test");    var scrl = hh.scrollTop;//浏览器内容区顶部到页面真实的顶部的距离。ex.在设置锚点的时候会用到    console.log(scrl);    var ofst = hh.offsetTop;//该元素距离页面顶部的距离    console.log(ofst);    console.log(hh.offsetHeight)//获取元素的高度的正确姿势，宽度同理，border以内包含border    var clnt = hh.clientHeight;//获取元素的高度的正确姿势2，宽度同理，border以内不不不包含border    var clnt2 = hh.clientTop;//border的高度    console.log(clnt+','+clnt2)};

这里放上html文件方便查看效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>dom常用方法总结</title>    <script src="dom.js"></script>    <style>        #test {            height: 20px;            border: 3px solid aqua;            margin-left: 5px;        }    </style></head><body><ul>    <li  id="firstLi">1</li>    <li><img id="img" src="#" alt="没有啦"></li>    <li>3</li>    <li>4</li>    <li>5</li></ul><div id="test">    相顾无言</div></body></html>

阅读全文

0 0