Tài liệu getElementById ( demo ) innerHTML là gì?

Tôi xin lỗi, tôi không thực sự hiểu lời giải thích của bạn. Tôi cũng bối rối - Bạn đang nói rằng bạn chưa viết bất kỳ mã HTML nào? . Nếu bạn chưa, thì đó là vấn đề của bạn

Bạn không thực sự nói tài liệu bị lỗi gì. getElementById(“bản trình diễn”). bên trongHTML là

Tôi cho rằng đó là một loại ngoại lệ con trỏ null. Nếu tài liệu. getElementById(“demo”) trả về undefined (nói cách khác, nó không thể tìm thấy id đó trong tài liệu) sau đó. InternalHTML sẽ đưa ra lỗi vì bạn không thể truy cập các thuộc tính trên giá trị rỗng hoặc không xác định. (Về mặt kỹ thuật, bạn không thể trên bất kỳ nguyên thủy nào, nhưng những cái khác có trình bao bọc đối tượng ngăn NPE. )

Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức

document.body.innerHTML = "";
4

Một chuỗi chứa tuần tự hóa HTML của hậu duệ của phần tử. Đặt giá trị của

document.body.innerHTML = "";
3 sẽ xóa tất cả các phần tử con của phần tử và thay thế chúng bằng các nút được tạo bằng cách phân tích cú pháp HTML được cung cấp trong chuỗi htmlString

document.body.innerHTML = "";
6
document.body.innerHTML = "";
7

Bị ném nếu cố gắng đặt giá trị của

document.body.innerHTML = "";
3 bằng cách sử dụng chuỗi không phải là HTML được định dạng đúng

document.body.innerHTML = "";
9
document.body.innerHTML = "";
7

Bị ném nếu cố gắng chèn HTML vào một nút có nút gốc là một

document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;
1

Thuộc tính

document.body.innerHTML = "";
3 có thể được sử dụng để kiểm tra nguồn HTML hiện tại của trang, bao gồm mọi thay đổi đã được thực hiện kể từ khi trang được tải lần đầu

Việc đọc

document.body.innerHTML = "";
3 khiến tác nhân người dùng tuần tự hóa đoạn HTML hoặc XML bao gồm các phần tử con của phần tử. Chuỗi kết quả được trả về

let contents = myElement.innerHTML;

Điều này cho phép bạn xem đánh dấu HTML của các nút nội dung của phần tử

Ghi chú. Đoạn HTML hoặc XML được trả về được tạo dựa trên nội dung hiện tại của phần tử, do đó, đánh dấu và định dạng của đoạn được trả về có khả năng không khớp với đánh dấu trang gốc

Đặt giá trị của

document.body.innerHTML = "";
3 cho phép bạn dễ dàng thay thế nội dung hiện có của một phần tử bằng nội dung mới

Ghi chú. Đây là câu hỏi nếu chuỗi được chèn có thể chứa nội dung độc hại tiềm ẩn. Khi chèn dữ liệu do người dùng cung cấp, bạn phải luôn cân nhắc sử dụng

document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;
5 để làm sạch nội dung trước khi chèn

Ví dụ: bạn có thể xóa toàn bộ nội dung của tài liệu bằng cách xóa nội dung của thuộc tính

document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;
6 của tài liệu

document.body.innerHTML = "";

Ví dụ này tìm nạp mã đánh dấu HTML hiện tại của tài liệu và thay thế các ký tự

document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;
7 bằng thực thể HTML
document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;
8, do đó về cơ bản chuyển đổi HTML thành văn bản thô. Điều này sau đó được bao bọc trong một phần tử
document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;
9. Sau đó, giá trị của
document.body.innerHTML = "";
3 được thay đổi thành chuỗi mới này. Do đó, nội dung tài liệu được thay thế bằng màn hình hiển thị toàn bộ mã nguồn của trang

document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`
;

chi tiết hoạt động

Chính xác thì điều gì sẽ xảy ra khi bạn đặt giá trị là

document.body.innerHTML = "";
3?

  1. Giá trị đã chỉ định được phân tích cú pháp dưới dạng HTML hoặc XML (dựa trên loại tài liệu), dẫn đến một đối tượng
    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    
    2 đại diện cho tập hợp các nút DOM mới cho các phần tử mới
  2. Nếu phần tử có nội dung đang được thay thế là phần tử
    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    
    3, thì thuộc tính
    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    
    5 của phần tử
    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    
    5 được thay thế bằng phần tử
    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    
    2 mới được tạo ở bước 1
  3. Đối với tất cả các phần tử khác, nội dung của phần tử được thay thế bằng các nút trong
    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    
    2 mới

Đặt giá trị của

document.body.innerHTML = "";
3 cho phép bạn thêm nội dung mới vào phần tử hiện có

Ví dụ: chúng ta có thể nối thêm một mục danh sách mới (_______21_______9) vào danh sách hiện có (

const list = document.getElementById("list");

list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    0)

    HTML

    <ul id="list">
      <li><a href="#">Item 1a>li>
      <li><a href="#">Item 2a>li>
      <li><a href="#">Item 3a>li>
    ul>
    

    JavaScript

    const list = document.getElementById("list");
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;

    Xin lưu ý rằng việc sử dụng

    document.body.innerHTML = "";
    
    3 để nối thêm các phần tử HTML (e. g.
    const list = document.getElementById("list");
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    2) sẽ dẫn đến việc loại bỏ bất kỳ người nghe sự kiện nào đã đặt trước đó. Nghĩa là, sau khi bạn thêm bất kỳ phần tử HTML nào theo cách đó, bạn sẽ không thể nghe các trình xử lý sự kiện đã đặt trước đó

    Không có gì lạ khi thấy

    document.body.innerHTML = "";
    
    3 được sử dụng để chèn văn bản vào trang web. Điều này có khả năng trở thành phương tiện tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm ẩn

    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    

    Mặc dù điều này có vẻ giống như một cuộc tấn công kịch bản chéo trang, nhưng kết quả là vô hại. HTML chỉ định rằng một thẻ

    const list = document.getElementById("list");
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    4 được chèn với
    document.body.innerHTML = "";
    
    3

    Tuy nhiên, có nhiều cách để thực thi JavaScript mà không cần sử dụng các phần tử

    const list = document.getElementById("list");
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    4, do đó, vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng
    document.body.innerHTML = "";
    
    3 để đặt các chuỗi mà bạn không có quyền kiểm soát. Ví dụ

    const name = "";
    el.innerHTML = name; // shows the alert
    

    Vì lý do đó, bạn nên sử dụng thay vì

    document.body.innerHTML = "";
    
    3

    • document.documentElement.innerHTML = `
      ${document.documentElement.innerHTML.replace(/</g,"<")}
      `
      ;
      5 để làm sạch văn bản trước khi nó được chèn vào DOM
    • let name = "John";
      // assuming 'el' is an HTML DOM element
      el.innerHTML = name; // harmless in this case
      
      // …
      
      name = "";
      el.innerHTML = name; // harmless in this case
      
      0 khi chèn văn bản thuần túy, vì thao tác này sẽ chèn dưới dạng văn bản thô thay vì phân tích cú pháp dưới dạng HTML

    Cảnh báo. Nếu dự án của bạn là dự án sẽ trải qua bất kỳ hình thức đánh giá bảo mật nào, việc sử dụng

    document.body.innerHTML = "";
    
    3 rất có thể sẽ khiến mã của bạn bị từ chối. Ví dụ: trong tiện ích mở rộng trình duyệt và gửi tiện ích mở rộng tới addons. mozilla. org, nó có thể bị từ chối trong quá trình xem xét. Vui lòng xem Chèn nội dung bên ngoài vào trang một cách an toàn để biết các phương pháp thay thế

    Ví dụ này sử dụng

    document.body.innerHTML = "";
    
    3 để tạo cơ chế ghi thông báo vào hộp trên trang web

    function log(msg) {
      const logElem = document.querySelector(".log");
    
      const time = new Date();
      const timeStr = time.toLocaleTimeString();
      logElem.innerHTML += `${timeStr}: ${msg}
    `
    ; } log("Logging mouse events inside this container…");

    Hàm

    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    4 tạo đầu ra nhật ký bằng cách lấy thời gian hiện tại từ một đối tượng
    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    5 bằng cách sử dụng
    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    6 và tạo một chuỗi có dấu thời gian và nội dung thông báo. Sau đó, thông báo được thêm vào hộp có lớp
    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    7

    Chúng tôi thêm một phương pháp thứ hai ghi lại thông tin về các sự kiện dựa trên

    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    8 (chẳng hạn như
    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    9,
    const name = "";
    el.innerHTML = name; // shows the alert
    
    0 và
    const name = "";
    el.innerHTML = name; // shows the alert
    
    1)

    function logEvent(event) {
      const msg = `Event ${event.type} at ${event.clientX}, ${event.clientY}`;
      log(msg);
    }
    

    Sau đó, chúng tôi sử dụng điều này làm trình xử lý sự kiện cho một số sự kiện chuột trên hộp chứa nhật ký của chúng tôi

    const boxElem = document.querySelector(".box");
    
    boxElem.addEventListener("mousedown", logEvent);
    boxElem.addEventListener("mouseup", logEvent);
    boxElem.addEventListener("click", logEvent);
    boxElem.addEventListener("mouseenter", logEvent);
    boxElem.addEventListener("mouseleave", logEvent);
    

    HTML khá đơn giản cho ví dụ của chúng tôi

    document.body.innerHTML = "";
    
    0

    const name = "";
    el.innerHTML = name; // shows the alert
    
    2 với lớp
    const name = "";
    el.innerHTML = name; // shows the alert
    
    3 chỉ là hộp đựng phục vụ mục đích bố cục, trình bày nội dung với hộp bao quanh.
    const name = "";
    el.innerHTML = name; // shows the alert
    
    2 có lớp là
    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "";
    el.innerHTML = name; // harmless in this case
    
    7 là vùng chứa cho chính văn bản nhật ký

    CSS sau tạo kiểu cho nội dung ví dụ của chúng tôi

    document.body.innerHTML = "";
    
    1

    Nội dung kết quả trông như thế này. Bạn có thể xem đầu ra trong nhật ký bằng cách di chuyển chuột vào và ra khỏi hộp, nhấp vào hộp đó, v.v.

    Tài liệu getElementById innerHTML là gì?

    HTML bên trong, Văn bản bên trong và Nội dung văn bản. Thuộc tính innerHTML trả về. Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và thẻ HTML bên trong . Thuộc tính InternalText trả về. Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có khoảng cách văn bản và thẻ ẩn CSS, ngoại trừ các phần tử

    Tài liệu getElementById dùng để làm gì?

    Tài liệu. getElementById() Phương thức Tài liệu getElementById() trả về một đối tượng Phần tử đại diện cho phần tử có thuộc tính id khớp với chuỗi đã chỉ định . Vì ID phần tử bắt buộc phải là duy nhất nếu được chỉ định, nên chúng là một cách hữu ích để nhanh chóng truy cập vào một phần tử cụ thể.

    ID demo có nghĩa là gì trong JavaScript?

    Đó là viết tắt của Trình diễn , vì vậy điều đó có nghĩa là họ đang sử dụng thẻ

    Mục đích chính của InternalHTML * là gì?

    InnerHTML thuộc tính Phần tử lấy hoặc đặt mã đánh dấu HTML hoặc XML có trong phần tử . Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức insertAdjacentHTML().