最常用的js DOM方法小结

最新推荐文章于 2022-05-01 19:56:24 发布

lance_10030

最新推荐文章于 2022-05-01 19:56:24 发布

阅读量312

点赞数

分类专栏： javascript 文章标签： javascript js原生 DOM 常用DOM方法

本文链接：https://blog.csdn.net/lance_10030/article/details/74450584

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最常用的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>