Webpage Element Identification via Viewport Property Changes
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for identifying important elements on a webpage, such as main content, navigation bars, headers, and footers, are inaccurate and inefficient, particularly for purposes like advertising, keyword extraction, and webpage indexing, as they fail to differentiate between elements with similar HTML tags.
Innovation Solution
The method involves analyzing the Document Object Model (DOM) of a webpage across different media queries and viewports to determine the ranking score of each element based on property changes, identifying elements with a ranking score greater than a predefined threshold as representative for further processing.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If existing methods analyze webpage content to identify important elements, then the process can be performed, but the accuracy and efficiency are insufficient
Solution Approach 1:
The patent changes the parameters for identifying important elements from static content analysis to dynamic property changes across different viewports. By analyzing how element properties (size, position, visibility) change across multiple viewport configurations, the system achieves more accurate identification while maintaining efficiency through automated DOM traversal and media query parsing.
Solution Approach 2:
The patent adds a new dimension to element identification by introducing viewport size as a variable. Instead of analyzing elements in a single fixed view, the system evaluates elements across multiple viewport sizes, transforming the identification process from two-dimensional (content-based) to three-dimensional (content + viewport context) analysis, thereby improving accuracy.
2Measurement precision
If existing methods use HTML tag analysis to identify elements, then processing can be performed, but elements with similar tags cannot be differentiated
Solution Approach 1:
The patent applies local quality by analyzing individual element properties (size, position, visibility) in the context of their specific viewport configuration rather than treating all elements uniformly. Each element is evaluated based on its local characteristics across different viewports, enabling precise differentiation between elements with similar HTML tags based on their unique display behaviors.
Solution Approach 2:
The patent segments the webpage into multiple elements and analyzes each element's properties independently across different viewports. By breaking down the analysis into discrete element-level property changes rather than holistic page analysis, the system achieves precise element differentiation while managing complexity through systematic processing.
3Measurement precision
If multiple viewports are analyzed to improve accuracy, then element identification becomes more precise, but processing time increases
Solution Approach 1:
The patent performs preliminary action by pre-defining a set of standard viewport configurations and media queries before actual analysis. The system pre-processes the DOM structure and identifies candidate elements that need detailed analysis, then applies viewport-based filtering to narrow down to truly important elements, reducing processing time while maintaining accuracy.
Solution Approach 2:
The patent applies partial action by analyzing only the necessary properties of elements (size, position, visibility) rather than all possible attributes. It selectively processes viewport configurations based on media query relevance, avoiding unnecessary analysis of irrelevant viewports and reducing processing time while preserving identification accuracy.
Data Source
AI summary
A method for identifying elements of a webpage is provided. The method includes accessing, by an electronic device, a document object model (DOM) of the webpage. Changes applied to properties of a plurality of elements of the webpage across different media queries for different viewports are then analyzed using the DOM. The different viewports are of different sizes. Based on analyzing, ranking score is determined for each element. Elements having ranking score greater than a predefined threshold are identified as representative elements of the webpage.