Page element access method, computing device and storage medium

Abstract

The embodiment of the invention provides a page element access method, computing equipment and a storage medium. Wherein a current node tree corresponding to the target page is obtained, and the current node tree takes page elements as nodes and is constructed and obtained according to a hierarchical relationship among the page elements; sequentially traversing each node in the current node tree from a root node of the current node tree to detect whether the node meets a first interaction requirement or not according to the element information of the page element corresponding to the node; under the condition that the node meets the first interaction requirement, taking the page element corresponding to the node as an interactive element; storing the element information of at least one interactive element in the target page into the data object; and in response to an access request for any piece of interactive element information in the target page, obtaining element information corresponding to the interactive element from the data object. According to the technical scheme provided by the embodiment of the invention, the access efficiency of the specific page element can be improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a page element access method, a computing device, and a storage medium. Background Art

[0002] When a browser renders a page, it uses page elements such as tags, text, and comments in the page document as nodes based on the page document, such as HTML (Hypertext Markup Language) or XML (eXtensible Markup Language) documents. The hierarchical relationship between page elements constructs a node tree, also known as the DOM (Document Object Model) tree. The node tree can display each node and its hierarchical relationship in a tree structure. In actual applications, there is a need to access specific page elements in a page. The existing technology requires traversing each node in the DOM tree in sequence to find the specific page element and obtain the element information of the specific page element. This access method has low efficiency. Summary of the Invention

[0003] Embodiments of the present application provide a page element access method, a computing device, and a storage medium to solve the problem of low efficiency in page element access in the prior art.

[0004] In a first aspect, an embodiment of the present application provides a method for accessing page elements, including:

[0005] Obtaining a current node tree corresponding to a target page; the current node tree is constructed based on the hierarchical relationship between page elements and uses page elements as nodes;

[0006] Starting from the main element node of the current node tree, traversing each node in the current node tree in sequence to detect whether the node meets the first interaction requirement according to the element information of the page element corresponding to the node;

[0007] In the case where the node meets the first interaction requirement, the page element corresponding to the node is used as an interactive element;

[0008] Saving element information of at least one interactive element in the target page into a data object;

[0009] In response to an access request for any interactive element information in the target page, element information corresponding to the interactive element is obtained from the data object.

[0010] In a second aspect, an embodiment of the present invention provides a device for accessing page elements, the device comprising:

[0011] An acquisition module is used to acquire a current node tree corresponding to a target page; the current node tree is constructed based on the hierarchical relationship between page elements and uses page elements as nodes;

[0012] a detection module, configured to traverse each node in the current node tree in sequence, starting from the main element node of the current node tree, to detect whether the node meets the first interaction requirement based on element information of the page element corresponding to the node;

[0013] A determination module, configured to, if the node meets the first interaction requirement, use the page element corresponding to the node as an interactive element;

[0014] A saving module, configured to save element information of at least one interactive element in the target page into a data object;

[0015] The access module is used to obtain element information corresponding to any interactive element in the target page from the data object in response to an access request for the interactive element information.

[0016] In a third aspect, an embodiment of the present application provides a computing device, including a processing component and a storage component;

[0017] The storage component stores one or more computer instructions; the one or more computer instructions are used to be called and executed by the processing component to implement the page element access method as described in the first aspect above.

[0018] In a fourth aspect, an embodiment of the present application provides a computer storage medium storing a computer program. When the computer program is executed by a computer, the page element access method described in the first aspect above is implemented.

[0019] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program or instructions, which, when executed by a processing component, implements the page element access method described in the first aspect above.

[0020] In an embodiment of the present application, a current node tree corresponding to a target page is obtained, where the current node tree is constructed with page elements as nodes according to a hierarchical relationship between page elements; starting from the root node of the current node tree, each node in the current node tree is traversed in turn to detect whether the node meets a first interaction requirement based on element information of the page element corresponding to the node; if the node meets the first interaction requirement, the page element corresponding to the node is used as an interactive element; the element information of at least one interactive element in the target page is saved in a data object; and in response to an access request for any interactive element information in the target page, the element information corresponding to the interactive element is obtained from the data object.

[0021] The data object can store the element information of the interactive page elements. Through the data object, specific page elements can be directly accessed without traversing the node tree, which can improve the access efficiency of the page elements.

[0022] These and other aspects of the present application will become more readily apparent from the description of the following embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0024] Figure 1 A flowchart of an embodiment of a method for accessing page elements provided by the present application is shown;

[0025] Figure 2 A schematic structural diagram of an embodiment of a device for accessing page elements provided by the present application is shown;

[0026] Figure 3 A schematic structural diagram of an embodiment of a computing device provided by the present application is shown. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application.

[0028] In some of the processes described in the specification and claims of this application and the above-mentioned figures, multiple operations that appear in a specific order are included, but it should be clearly understood that these operations may not be executed in the order in which they appear in this document or may be executed in parallel. The serial numbers of the operations, such as 101, 102, etc., are only used to distinguish between different operations, and the serial numbers themselves do not represent any order of execution. In addition, these processes may include more or fewer operations, and these operations may be executed in sequence or in parallel. It should be noted that the descriptions of "first", "second", etc. in this document are used to distinguish different messages, devices, modules, etc., and do not represent a sequential order, nor do they limit "first" and "second" to being different types.

[0029] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without making creative efforts are within the scope of protection of this application.

[0030] As described in the background art, the specific page element is found by sequentially traversing each node in the DOM tree to obtain the element information of the specific page element. This access efficiency is low.

[0031] In order to improve the access efficiency of specific page elements, the present application proposes a page element access method, wherein the method includes: obtaining a current node tree corresponding to a target page, the current node tree using page elements as nodes and constructed according to the hierarchical relationship between page elements; starting from the root node of the current node tree, traversing each node in the DOM tree in turn to detect whether the node meets a first interaction requirement based on the element information of the page element corresponding to the node; if the node meets the first interaction requirement, the page element corresponding to the node is used as an interactive element; the element information of at least one interactive element in the target page is saved in a data object; and in response to an access request for any interactive element information in the target page, the element information corresponding to the interactive element is obtained from the data object.

[0032] The data object can store the element information of the interactive page elements. Through the data object, a specific page element can be directly accessed to obtain the element information of the page element without traversing the node tree, which can improve access efficiency.

[0033] Figure 1 This is a flow chart of an embodiment of a control method provided in an embodiment of the present application. The method may include the following steps:

[0034] 101: Get the current node tree corresponding to the target page.

[0035] The current node tree uses page elements as nodes and is constructed based on the hierarchical relationship between page elements.

[0036] The current node tree, such as a DOM tree, can be obtained by parsing a page document, such as an HTML or XML document, of the target page, wherein the page document includes configuration information of the target page.

[0037] For example, the page document can be 、 、 Parse the tags as element type nodes; convert the text content between tags in the page document into Hello World "Hello World" in the document is parsed as a text type node; the comments in the document such as <! --This is a comment--> are parsed as comment type nodes; the attributes in the document such as<ahref="https: / / www.example.com"> The href in the element is resolved to an attribute of the node of type element.

[0038] The current node tree may include some element information of the page element corresponding to the node, such as the element name and basic attribute information. The name can refer to , <button> or <input> Basic attribute information can include, for example, the element's class name, event information such as onclick(), behavior information such as TabIndex, ContentEditable, and Draggable, and state information such as aria-expanded. Information in the node tree can be saved to memory.

[0039] 102: Starting from the main element node of the current node tree, traverse each node in the current node tree in sequence to detect whether the node meets the first interaction requirement according to the element information of the page element corresponding to the node.

[0040] For example, in the node tree obtained by parsing a document in HTML format, document is the root node of the DOM tree, representing the entire HTML document and the ancestor of all other nodes. html is a direct child of document and represents the root element of the HTML document. head is the first child node of html and typically contains metadata about the document. body is the second child node of html and contains the main content of the document, such as paragraphs, images, and links.

[0041] You can start traversing the current node tree from the main element node in the current node tree, such as the body node.

[0042] The element information used to detect whether a node meets the first interaction requirement may include name, basic attribute information, style rules, location information, style information, and the like.

[0043] The name and basic attribute information can be obtained from the node tree, and the style rules can be obtained from the memory. If the location information and style information are saved in the cache, the location information and style information are obtained from the cache. If the location information and style information are not found in the cache, the location information and style information can be calculated while traversing the nodes and saved in the cache. The generation and storage of location information and style information are described in detail below.

[0044] The style rule may define the initial color, initial font size, initial position, and visibility attributes of a node, etc. The style rule may be stored in memory.

[0045] The position information may include, for example, width, height, top position, and left position, and the style information may include, for example, color and font size.

[0046] The style rules, location information, and how to obtain style information are described in detail below.

[0047] 103: When the node meets the first interaction requirement, the page element corresponding to the node is used as an interactive element.

[0048] 104: Save element information of at least one interactive element in the target page into a data object.

[0049] The identifier, name, basic attribute information, path information, child node information, style rules, location information, and / or style information of the element information of at least one interactive element can be saved in a data object. The identifier can be generated during the traversal process, and the specific implementation method can be described in detail below.

[0050] The name and basic attribute information of at least one interactive element can be obtained from the node tree in memory and saved to the data object.

[0051] By traversing the node tree, we can obtain the path information and child node information of at least one interactive element. The path information can be calculated based on the node's hierarchical relationship and used to describe the node path. The child node information can include the identifiers and basic attribute information of all child nodes of the node.

[0052] The position information and style information can be calculated during the traversal of the node tree or obtained from the cache.

[0053] The data object may be in the form of a mapping table. For example, the data object may be constructed by using the identifier of the interactive element as a key and other element information of the interactive element except the identifier as a value.

[0054] 105: In response to an access request for any interactive element information in the target page, obtain element information corresponding to the interactive element from the data object.

[0055] Among them, accessing the interactive element can obtain element information corresponding to the interactive element, or can also locate the interactive element and then modify the element information of the interactive element.

[0056] In this embodiment, the element information of the interactive page elements can be stored in the data object. Through the data object, a specific page element can be directly accessed to obtain the element information of the specific page element or modify the page element, etc., without traversing the node tree, which can improve access efficiency.

[0057] In some embodiments, detecting whether a node meets the first interaction requirement based on element information of the page element corresponding to the node may include: detecting whether the node belongs to the target node type and meets the visibility condition and at least one interaction condition based on the element information of the page element corresponding to the node.

[0058] For example, the target node type includes an element type and a text type, that is, the first interaction requirement is met only when the node belongs to an element type or a text type and meets a visibility condition and at least one interaction condition.

[0059] In some embodiments, detecting whether a node meets the visibility condition based on the element information of the page element corresponding to the node may include: detecting whether the node simultaneously meets the condition that there is no hidden information in the element information based on the element information of the page element corresponding to the node, and judging that the page element corresponding to the node is within the visible range based on the position information in the element information, and judging that the page element corresponding to the node is not blocked based on the position information in the element information.

[0060] Among them, the absence of hidden information in the element information can refer to the visibility attribute in the element information not being hidden. Based on the position information in the element information, it is determined that the page element corresponding to the node is within the viewport, which can refer to the node calling the getBoundingClientRect() method to obtain the position information of the page element corresponding to the node, such as the bottom position, top position, left position and right position of the page element. If the bottom position does not exceed the visible bottom, the top position does not exceed the visible top, the left position does not exceed the visible left boundary, and the right position does not exceed the visible right boundary, then the page element is within the visible range, wherein the visible left boundary can refer to the left boundary of the viewport or the left boundary of the viewport extended to the left by a predetermined distance, the visible right boundary can refer to the right boundary of the viewport or the right boundary of the viewport extended to the right by a predetermined distance, the visible top can refer to the top of the viewport or the top of the viewport extended upward by a predetermined distance, and the visible bottom can refer to the bottom of the viewport or the bottom of the viewport extended downward by a predetermined distance.

[0061] Judging whether the page element corresponding to the node is not obscured based on the position information in the element information may mean determining the center position coordinates of the page element, such as (x, y), according to the position information, and having the document execute elementFromPoint(x, y) to obtain the top-level page element in the current viewport. If the page element corresponding to the node is identical to the top-level page element, or the page element corresponding to the node is an ancestor element of the top-level page element, then the page element corresponding to the node is not obscured.

[0062] In this embodiment, page elements that are not hidden, not blocked, and located in the visible range may be regarded as page elements that meet the visibility condition.

[0063] In some embodiments, detecting whether a node satisfies at least one interaction condition based on element information of a page element corresponding to the node may include: detecting whether the node satisfies the following conditions: the element information includes an interactive name; and / or the element information includes interactive event information; and / or the element information includes interactive role information; and / or the element information includes interactive status information; and / or the element information includes interactive behavior information.

[0064] The interactive name included in the element information may refer to the tag name of the page element corresponding to the node belonging to the interactive tag name. For example, the interactive tag name may include , < / button> <button> , <input> , <select>,< / select> <textarea>,< / textarea> <details>,as well as <summary>wait.

[0065] The interactive event information included in the element information may refer to, for example, the element information including click event information such as onclick().

[0066] The element information including the interactive role information may refer to the element information including interactive role information such as role="button", and the element may be determined to be interactive based on the interactive role information of the element.

[0067] Including interactive state information in the element information may mean that the element information includes information such as aria-expanded, aria-pressed, aria-selected, and aria-checked.

[0068] The interactive behavior information included in the element information may refer to the element information including editable information such as contenteditable="true" or draggable information such as draggable="true" or keyboard positioning information such as TabIndex.

[0069] In this embodiment, a node can be determined to be interactive if it meets at least one of the multiple interaction conditions, that is, the node's element information can be determined to be interactive if it contains any one of the interactive name, interactive role information, interactive status information, and interactive behavior information.

[0070] In some embodiments, obtaining the current node tree corresponding to the target page may include: in response to a request to obtain the target page, based on the page document of the target page, constructing the current node tree corresponding to the target page, parsing the style sheet in the page document of the target page, determining the style information and location information corresponding to each node in the current node tree, and saving the style information and location information of the node to the cache.

[0071] For example, the HTML document of the target page can be directly parsed to obtain the current node tree such as the DOM tree. In addition, the position information and style information corresponding to each node can also be obtained by parsing the CSS style sheet in the HTML document.

[0072] CSS style sheets can define static style rules for nodes, such as their initial color, font size, and position. Based on the hierarchical relationships of nodes in the DOM tree and the static style rules corresponding to each node, the final position and style information of the node can be calculated. Position information can include, for example, width, height, top position, and left position, while style information can include, for example, color and font size. Furthermore, the node's style rule information can be saved to memory.

[0073] Among them, the node can be used as the key and the node's position information as the value, and stored in the cache using the first WeakMap (weak map) object; the node can be used as the key and the node's style information as the value, and stored in the cache using the second WeakMap object.

[0074] Detecting whether the node meets the first interaction requirement based on element information of the page element corresponding to the node may include: detecting whether the node meets the first interaction requirement based on element information of the page element corresponding to the node in the memory and the cache.

[0075] For example, the node tree in memory can include the element's name and basic attribute information. Basic attribute information can include the element's class name, event information such as onclick(), behavior information such as TabIndex, ContentEditable, and Draggable, and state information such as aria-expanded. This can be used to determine whether the page element corresponding to the node meets at least one interaction condition.

[0076] The visibility attribute in the in-memory style rule can be used to determine whether the page element corresponding to the node is hidden, so as to further determine whether the node meets the visibility condition.

[0077] The cache can store the location information and style information of the element, and can determine whether the page element corresponding to the node is blocked and whether it is within the visible range based on the location information, so as to further determine whether the node meets the visibility conditions.

[0078] In some embodiments, saving element information of at least one interactive element in the target page into a data object may include: generating an identifier corresponding to at least one interactive element in the target page, and saving element information including the identifier of at least one interactive element into the data object.

[0079] A unique identifier may be generated for each interactive element in ascending order according to the traversal sequence. For example, the identifier of the first interactive element traversed may be "element1" and the identifier of the second interactive element traversed may be "element2".

[0080] In response to an access request for any interactive element information in a target page, obtaining element information corresponding to the interactive element from a data object may include: in response to the access request for any interactive element information in the target page, determining a target identifier in the access request, and obtaining element information corresponding to the interactive element corresponding to the target identifier from the data object. The unique identifier allows for quick access to the interactive element corresponding to the identifier.

[0081] In some embodiments, the method may further include: calculating a hash value corresponding to at least one interactive element based on element information of at least one interactive element, and generating a current node tree snapshot corresponding to the current node tree based on the element information and hash value of at least one interactive element; generating an access request for each interactive element in response to the generation operation of the current node tree snapshot; obtaining a historical node tree snapshot; comparing the hash value of each interactive element in the current node tree snapshot and the historical node tree snapshot; and determining the target interactive element that has changed based on the comparison result.

[0082] Among them, if the element information of the interactive element changes in the time interval from generating the historical node tree snapshot to generating the current node tree snapshot, such as the position information, style information, status information and / or behavior information of the interactive element, the hash value of the interactive element in the current node tree snapshot will be different from the hash value of the interactive element in the historical node tree snapshot. The unique identifier of the interactive element generated above can be used as the element information of the interactive element to construct the node tree snapshot. The hash values ​​of each interactive element in the current node tree snapshot and the historical node tree snapshot can be compared based on the unique identifier of the interactive element. By comparing the hash values, the changed target interactive element can be quickly located. By using hash value comparison without comparing each element information of the interactive element, the comparison efficiency can be improved.

[0083] In some embodiments, the method may further include: determining the area to be displayed of the target page in response to a scroll request for the target page; re-traversing each node in the current node tree to detect whether the node meets the second interaction requirement based on the element information of the page element corresponding to the node; if the node meets the second interaction requirement, saving the element information of at least one element to be interacted with in the cache; and rendering according to the element information of at least one element to be interacted with in the cache in response to a display request for the area to be displayed.

[0084] Among them, responding to the scroll request for the target page can refer to monitoring the scroll event. Among them, detecting whether the node meets the second interaction requirement can refer to detecting whether the node meets the requirements that the node belongs to the target node type and the node meets at least one interaction condition and that there is no hidden information in the element information of the node, and judging based on the position information in the element information that the page element corresponding to the node is located in the visible range of the area to be displayed, and judging based on the position information in the element information that the page element corresponding to the node is not blocked. Through the above judgment conditions, the element information of the elements to be interacted that are visible and can be interacted with in the area to be displayed can be pre-stored in the cache. In addition, a unique identifier of the element to be interacted can be generated, and the element information containing the unique identifier can be pre-stored in the cache.

[0085] When the user scrolls to the area to be displayed, the element information of the elements to be interacted with in the area to be displayed can be obtained from the cache to render according to the element information, thereby improving the page response speed and interactive experience.

[0086] In some embodiments, the method may further include: creating an overlay with a target style matching any interactive element; and placing the overlay over the page area of ​​the interactive element in the target page to mark the interactive element. This may cause the interactive element to be highlighted.

[0087] Optionally, creating an overlay with a target style that matches any interactive element may include creating an overlay with a target style that matches all interactive elements. Optionally, creating an overlay with a target style that matches any interactive element may include: in response to an interaction request for a target page, determining any interactive element for which interaction is requested; and creating an overlay with a target style that matches the interactive element. For example, an overlay with a target style may be created for an interactive element triggered by a click operation, etc.

[0088] An overlay can be created based on the position of the interactive element, ensuring that the overlay's position aligns with the interactive element. The target style of the overlay can include its color, transparency, and whether it has a border. Furthermore, the overlay can display a logo corresponding to the interactive element to facilitate user differentiation between different interactive elements.

[0089] In addition, you can listen for scrolling and window change events. When these events occur, you can recalculate the position information of the interactive element and update the corresponding overlay layer based on the position information so that the overlay layer can accurately cover the page area where the interactive element is in the target page.

[0090] Figure 2 A schematic diagram of a structure of an embodiment of a device for accessing page elements provided in an embodiment of the present application, the device may include:

[0091] Acquisition module 201, used to obtain the current node tree corresponding to the target page;

[0092] A detection module 202 is configured to traverse each node in the current node tree in sequence, starting from the main element node of the current node tree, to detect whether the node meets the first interaction requirement based on the element information of the page element corresponding to the node;

[0093] Determining module 203, configured to, if the node meets the first interaction requirement, set the page element corresponding to the node as an interactive element;

[0094] A saving module 204 is configured to save the element information of at least one interactive element in the target page into a data object;

[0095] The access module 205 is configured to obtain element information corresponding to any interactive element from a data object in response to an access request for any interactive element information in a target page.

[0096] The current node tree uses page elements as nodes and is constructed based on the hierarchical relationship between page elements.

[0097] In some embodiments, the detection module detects whether the node meets the first interaction requirement based on the element information of the page element corresponding to the node, which may include: detecting whether the node belongs to the target node type and meets the visibility condition and at least one interaction condition based on the element information of the page element corresponding to the node.

[0098] In some embodiments, the detection module detects whether a node meets the visibility condition based on the element information of the page element corresponding to the node, which may include: detecting whether the node simultaneously meets the condition that there is no hidden information in the element information based on the element information of the page element corresponding to the node, and judging that the page element corresponding to the node is within the visible range based on the position information in the element information, and judging that the page element corresponding to the node is not blocked based on the position information in the element information.

[0099] In some embodiments, the detection module detects whether a node satisfies at least one interaction condition based on the element information of the page element corresponding to the node, which may include: detecting, based on the element information of the page element corresponding to the node, whether the node satisfies the following conditions: the element information includes an interactive name; and / or the element information includes interactive event information; and / or the element information includes interactive role information; and / or the element information includes interactive status information; and / or the element information includes interactive behavior information.

[0100] In some embodiments, the acquisition module acquires the current node tree corresponding to the target page, which may include: responding to an acquisition request for the target page, constructing the current node tree corresponding to the target page based on the page document of the target page, parsing the style sheet in the page document of the target page, determining the style information and position information corresponding to each node in the current node tree, and saving the style information and position information of the node to the cache.

[0101] Accordingly, the detection module detects whether the node meets the first interaction requirement based on the element information of the page element corresponding to the node, which may include: detecting whether the node meets the first interaction requirement based on the element information of the page element corresponding to the node in the memory and the cache.

[0102] In some embodiments, the saving module saves the element information of at least one interactive element in the target page into the data object, which may include: generating an identifier corresponding to at least one interactive element in the target page, and saving the element information including the identifier of at least one interactive element into the data object.

[0103] The access module responds to an access request for any interactive element information in the target page, and obtains the element information corresponding to the interactive element from the data object, which may include: responding to an access request for any interactive element information in the target page, determining the target identifier in the access request, and obtaining the element information corresponding to the interactive element corresponding to the target identifier from the data object.

[0104] In some embodiments, the apparatus may further include:

[0105] A comparison module is used to calculate the hash value corresponding to at least one interactive element based on the element information of at least one interactive element, and generate a current node tree snapshot corresponding to the current node tree based on the element information and hash value of at least one interactive element; in response to the generation operation of the current node tree snapshot, generate an access request for each interactive element; obtain a historical node tree snapshot; compare the hash value of each interactive element in the current node tree snapshot and the historical node tree snapshot; and determine the target interactive element that has changed based on the comparison result.

[0106] In some embodiments, the apparatus may further include:

[0107] A preloading module is used to determine the area to be displayed of the target page in response to a scroll request for the target page; re-traverse each node in the current node tree to detect whether the node meets the second interaction requirement based on the element information of the page element corresponding to the node; if the node meets the second interaction requirement, the element information of at least one element to be interacted with is saved in the cache; and in response to a display request for the area to be displayed, rendering is performed based on the element information of at least one element to be interacted with in the cache.

[0108] In some embodiments, the apparatus may further include:

[0109] The highlight module creates an overlay with a target style that matches any interactive element; the overlay is placed on the page area where the interactive element is located in the target page to mark the interactive element.

[0110] The step of creating an overlay with a target style that matches any interactive element may include: in response to an interaction request for a target page, determining any interactive element for which interaction is requested; and creating an overlay with a target style that matches the interactive element. For example, an overlay with a target style may be created for an interactive element triggered by a click operation or the like.

[0111] Figure 2 The page element access device can execute Figure 1 The implementation principle and technical effects of the page element access method described in the illustrated embodiment will not be described in detail. The specific manner in which each module and unit performs operations in the page element access device in the above embodiment has been described in detail in the embodiment of the method, and will not be elaborated here.

[0112] Figure 3 This is a schematic diagram of a computing device according to an embodiment of the present application. Figure 3 As shown, in practice, the computing device may include: a storage component 301 and a processing component 302 .

[0113] The storage component 301 is used to store computer programs and can be configured to store various other data to support operations on the computing device. Examples of such data include instructions for any application or method operating on the computing device, data structures, contact data, phone book data, messages, images, videos, etc.

[0114] The processing component 302 is coupled to the storage component 301 and is used to execute the computer program in the storage component 301 to implement the following Figure 1 The page element access method described in the illustrated embodiment.

[0115] Further, if Figure 3 As shown, the computing device may further include: a communication component 303, a display component 304, a power component 305, an audio component 306 and other components. Figure 3 Only some components are shown schematically, and it does not mean that the computing device only includes Figure 3 In addition, Figure 3 The components in the dotted box are optional components, not mandatory components, and depend on the specific product form of the computing device. The computing device of this embodiment can be implemented as a terminal device such as a desktop computer, a laptop computer, a smart phone or an IOT (Internet of Things) device, or a server device such as a conventional server, a cloud server or a server array. If the computing device of this embodiment is implemented as a terminal device such as a desktop computer, a laptop computer, a smart phone, etc., it can include Figure 3 If the computing device of this embodiment is implemented as a server device such as a conventional server, a cloud server or a server array, it may not include the components in the dotted box; Figure 3 Components within the dotted box.

[0116] The processing component includes one or more processors to execute computer instructions to perform all or part of the steps in the above method. Of course, the processing component can also be implemented as one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above method.

[0117] The above-mentioned storage component can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random-access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0118] The communication component is configured to facilitate wired or wireless communication between the device in which the communication component resides and other devices. The device in which the communication component resides may access a wireless network based on a communication standard, such as a mobile communication network, or a combination thereof. In an exemplary embodiment, the communication component receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel.

[0119] The display assembly may include a screen, which may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touches, slides, and gestures on the touch panel. The touch sensor may not only sense the boundaries of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

[0120] The power supply assembly provides power to various components of the device in which the power supply assembly is located. The power supply assembly may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the device in which the power supply assembly is located.

[0121] The above-mentioned audio component can be configured to output and / or input audio signals. For example, the audio component includes a microphone (MIC), and when the device where the audio component is located is in an operating mode, such as call mode, recording mode, and voice recognition mode, the microphone is configured to receive external audio signals. The received audio signal can be further stored in a memory or sent via a communication component. In some embodiments, the audio component also includes a speaker for outputting audio signals.

[0122] Accordingly, an embodiment of the present application further provides a computer-readable storage medium storing a computer program, which, when executed by a processor, enables the processor to implement the steps in the above method embodiment. The computer-readable storage medium includes volatile or non-volatile or a combination thereof, and may be removable or non-removable. Examples of computer-readable storage media include, but are not limited to, phase-change random access memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), flash memory or other memory technology, CD-ROM, digital versatile disc (DVD) or other optical storage, magnetic cassette, tape disk storage or other magnetic storage device or any other non-transmission medium.

[0123] Accordingly, an embodiment of the present application further provides a computer program product, which includes a computer program or instructions, and when the computer program or instructions are executed by a processor, the processor is enabled to implement the steps in the above-mentioned method embodiment. It should be understood that each process or a combination of multiple processes in the above-mentioned method flow can be implemented by a computer program or instruction. In addition, these computer programs or instructions can be applied to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device, so that the processor of the general-purpose computer, the special-purpose computer, the embedded processor or other programmable data processing device can be implemented as a device for implementing the corresponding functions in the above-mentioned method embodiment.

[0124] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0125] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, or apparatus comprising a list of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a..." does not preclude the presence of additional identical elements in the process, method, or apparatus comprising the element.

[0126] Finally, it should be noted that the above are merely examples of the present application and are not intended to limit the present application. Various modifications and variations are possible for those skilled in the art. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application are intended to be included within the scope of the claims of the present application.< / summary> < / details> < / button>

Claims

1. A page element access method, characterized in that: include: Get the current node tree corresponding to the target page; The current node tree is constructed based on the hierarchical relationship between page elements and takes page elements as nodes; Starting from the main element node of the current node tree, traversing each node in the current node tree in sequence to detect whether the node meets the first interaction requirement according to the element information of the page element corresponding to the node; In the case where the node meets the first interaction requirement, the page element corresponding to the node is used as an interactive element; Saving element information of at least one interactive element in the target page into a data object; In response to an access request for any interactive element information in the target page, element information corresponding to the interactive element is obtained from the data object.

2. The method according to claim 1, characterized in that The detecting, based on the element information of the page element corresponding to the node, whether the node meets the first interaction requirement includes: According to the element information of the page element corresponding to the node, it is detected whether the node belongs to the target node type and meets the visibility condition and at least one interaction condition.

3. The method according to claim 2, characterized in that The detecting, based on the element information of the page element corresponding to the node, whether the node satisfies the visibility condition comprises: According to the element information of the page element corresponding to the node, detect whether the node simultaneously satisfies the conditions that there is no hidden information in the element information, and based on the position information in the element information, judge that the page element corresponding to the node is within the visible range, and based on the position information in the element information, judge that the page element corresponding to the node is not blocked.

4. The method according to claim 2, characterized in that Detecting whether the node satisfies at least one interaction condition according to element information of a page element corresponding to the node includes: According to the element information of the page element corresponding to the node, detecting whether the node satisfies the requirement that the element information includes an interactive name; And / or, the element information includes interactive event information; And / or, the element information includes interactive role information; And / or, the element information includes interactive state information; And / or, the element information includes interactive behavior information.

5. The method according to claim 1, wherein The current node tree corresponding to the target page is obtained as follows: In response to a request to obtain a target page, based on the page document of the target page, construct a current node tree corresponding to the target page, parse the style sheet in the page document of the target page, determine style information and position information corresponding to each node in the current node tree, and save the style information and position information of the node to a cache; Detecting, according to element information of a page element corresponding to the node, whether the node meets the first interaction requirement includes: According to the element information of the page element corresponding to the node in the memory and the cache, it is detected whether the node meets the first interaction requirement.

6. The method according to claim 1, characterized in that Also includes: Calculating hash values ​​corresponding to the at least one interactive element according to the element information of the at least one interactive element, and generating a current node tree snapshot corresponding to the current node tree according to the element information and the hash value of the at least one interactive element; In response to the generation operation of the current node tree snapshot, generating an access request for each interactive element; Get a snapshot of the history node tree; Comparing the hash value of each interactive element in the current node tree snapshot and the historical node tree snapshot; Based on the comparison results, the target interactive element that has changed is determined.

7. The method according to claim 1, characterized in that Also includes: In response to a scroll request for the target page, determining a to-be-displayed area of ​​the target page; Re-traversing each node in the current node tree to detect whether the node meets the second interaction requirement based on element information of the page element corresponding to the node; In the case where the node meets the second interaction requirement, taking the page element corresponding to the node as the element to be interacted with, and saving the element information of the at least one element to be interacted with in a cache; In response to a display request of the to-be-displayed area, rendering is performed according to the element information of the at least one to-be-interacted element in the cache.

8. The method according to claim 1, characterized in that Also includes: Create an overlay with targeted styles that matches any interactive element; The covering layer is covered on the page area of ​​the interactive element in the target page to mark the interactive element.

9. The method according to claim 1, characterized in that Saving the element information of at least one interactive element in the target page into the data object includes: Generate an identifier corresponding to at least one interactive element in the target page, and save element information including the identifier of the at least one interactive element into a data object; The step of obtaining, in response to an access request for any interactive element information in the target page, element information corresponding to the interactive element from the data object includes: In response to an access request for any interactive element information in the target page, a target identifier in the access request is determined, and element information corresponding to the interactive element corresponding to the target identifier is acquired from the data object.

10. An electronic device, characterized in that: include: A memory, a processor, and a communication interface; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor executes the page element access method according to any one of claims 1 to 9.

11. A non-transitory machine-readable storage medium, characterized in that The non-transitory machine-readable storage medium stores executable code, and when the executable code is executed by a processor of an electronic device, the processor is caused to execute the page element access method according to any one of claims 1 to 9.

Images