javascript - HTML DOM getElementById()-Node JS

Question

我有这段代码，可以根据该元素的 ID 为 html 页面的不同部分添加值， 代码工作完美，没有问题，但我正在寻找一种更好、更高效的解决方案来替换所有 getelementbyid 功能(如果有)

这意味着是否有另一种方法可以减少下面代码的大小并用另一种方法进行更改

我的代码如下:

$('#public-event').modal('show');
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/envoi/update/' + id,
        })
            .done(function (data) {
                var html = ""
                console.log(data);

                for (let i = 0; i < data.length; i++) {
                    if (id === data[i].events._id) {
                        console.log(data[i].events.title)
                        document.getElementById("title").innerHTML = data[i].events.title;
                        document.getElementById("eventDateTime").innerHTML = `${data[i].events.eventDate} at ${data[i].events.targetReminder} | ${data[i].events.targetAmPM}`;
                        document.getElementById("createBy").innerHTML = data[i].events.author;
                        document.getElementById("dateCreation").innerHTML = data[i].events.author;
                        document.getElementById("description").innerHTML = data[i].events.caption;
                        document.getElementById("pubpriv").innerHTML = data[i].events.category;
                        document.getElementById("location").innerHTML = data[i].events.location;
                        $('#monImage').attr('src', 'img/sam.jpg');
                        $('#eventImage').attr('src', 'uploads/' + data[i].events.img);
                        document.getElementById("deleteButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("completeButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("CommentButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("CommentButtn").setAttribute('data-content', data[i].events.author);
                        document.getElementById("likeButton").setAttribute('data-id', data[i].events._id);
                        document.getElementById("likeButton").setAttribute('data-content', data[i].events.author);
                        document.getElementById("showComment").setAttribute('data-id', data[i].events._id);
                        document.getElementById("comment-number").innerHTML = data[i].events.comments.length +' Comments';
                        //to modify imges with dynamic
                    }

感谢您的建议，

最诚挚的问候，

Answer 1

您的代码由原生 JS 和 jQuery 组成，原生更为冗长。 jQuery 自己的口号是:“少写，多做”——所以这是值得借鉴的一点。而且，某些元素需要特定类型的格式，因此需要明确的声明。您还可以将重复值合并到一个语句中。

$('#title').text(data[i].events.title)
$('#eventDateTime').text(`${data[i].events.eventDate} at ${data[i].events.targetReminder} | ${data[i].events.targetAmPM}`)
$('#createBy, #dateCreation').text(data[i].events.author)
$('#description').text(data[i].events.caption)
$('#pubpriv').text(data[i].events.category)
$('#location').text(data[i].events.location)
$('#monImage').attr('src', 'img/sam.jpg')
$('#eventImage').attr('src', 'uploads/' + data[i].events.img)
$('#deleteButtn, #completeButtn, #CommentButtn, #likeButton, #showComment').attr('data-id', data[i].events._id)
$('#CommentButtn, #likeButton').attr('data-content', data[i].events.author)
$('#comment-number').text(`${data[i].events.comments.length} Comments`)

如果您的值确实只是文本且不包含 HTML，那么使用 .text 而不是 .html 也值得注意。否则，替换为 .html 也没有什么坏处。