JS 项目中遇到的问题汇总

对象赋值

• 通常对象赋值之后，被赋值的对象中数据的修改会影响原对象中的内容，为了避免数据混乱所以需要进行特殊的处理，处理方式：
  • 将对象转成string，解除地址的绑定关系，然后再转成新的对象进行赋值（详细参考js 对象传值 和 赋值问题）

// 封装函数
// 对象复制
function cloneObject(obj) {
    return JSON.parse(JSON.stringify(obj))
}

每次新增内容之后，自动滚动到底部

• 正常情况下向元素中添加内容之后，不会自动定位到页面底部，需要进行特殊的处理：

function xxx() {
    // 在文档末尾增加定位标识的div
    let comeDown = document.getElementById("ml_panel_msg_end");
    // 定位到末尾
    comeDown.scrollIntoView(); 
}

创建元素

• 为了动态在页面上添加内容，需要在代码中创建元素

function createMLZPanel(contentStr)
{
    let rootPanelDiv = document.getElementById("ml_z_panel_root");
    if (rootPanelDiv == undefined)
    {
        rootPanelDiv = document.createElement("div");
        rootPanelDiv.id = 'ml_z_panel_root';
        rootPanelDiv.className = "ml_z_panel_root";
    }
    // 删除子节点
    let childNodesLen = rootPanelDiv.childNodes.length;
    for (let i = 0;i < childNodesLen; i++)
    {
        rootPanelDiv.removeChild(rootPanelDiv.childNodes[i]);
        i--;
        childNodesLen--;
    }

    // yd content
    let ml_z_yd_content = document.createElement("div");
    ml_z_yd_content.id = "ml_z_yd_content";
    ml_z_yd_content.className = "ml_z_yd_content";
    rootPanelDiv.appendChild(ml_z_yd_content);

    // content
    let ml_z_panel_content = document.createElement("div");
    ml_z_panel_content.className = "ml_z_panel_content";


    let ml_panel_text = document.createElement("div");
    ml_panel_text.className = 'ml_z_panel_text';
    // ml_panel_text.innerHTML = "aaaa:bbbb:cccc:" + (++i);
    ml_panel_text.innerHTML = contentStr;
    ml_z_panel_content.appendChild(ml_panel_text)


    let ml_z_panel_content_border = document.createElement("div");
    ml_z_panel_content_border.className = 'ml_z_panel_content_border';
    ml_z_panel_content.appendChild(ml_z_panel_content_border)

    rootPanelDiv.appendChild(ml_z_panel_content);

    return rootPanelDiv;
}

父窗口中的dom元素控制

• 有时候我们需要获得父窗体中的相关dom元素，我们可以使用下面的方法

// javascript 原生方法
window.parent.document;
// jquery 方法
$("#xxx", window.parent.document);
$(".xxx", window.parent.document);

JS 在元素前/后添加新的元素

• 有时候我们需要在某个元素前/后添加新的元素，比如把内容添加到末尾定位符之前或者必须要求div的先后顺序的时候
  1. 在元素前添加

    let ml_z_panel_bases = document.getElementById("ml_z_panel_bases");
    // 父元素.insertBefore(新元素, 已经存在的元素)
    ml_z_panel_bases.parentNode.insertBefore(createMLZPanel(contentStr), ml_z_panel_bases);
  

  1. 在元素后添加（因为之后在元素前添加的函数，所以在元素后添加需要自己进行封装）

    // 在元素后添加元素
    function insertAfter(newElement, targentElement) {
        var parent = targentElement.parentNode;
        if (parent.lastChild == targentElement) {
            parent.appendChild(newElement);
        } else {
            // targentElement.nextSibling：当前元素的下一个元素
            parent.insertBefore(newElement, targentElement.nextSibling)
        }
    }
  

参考内容

• js 对象传值 和 赋值问题
• 让DIV的滚动条自动滚动到最底部的3种方法(推荐)
• document.createElement创建添加属性
• JS 在元素后面添加新的元素

首页 > 学习总览 > 开发语言 > JavaScript