12.1. Selector and Attribute Setting
Selector and attribute
settings are used to retrieve information from the target page’s
source code. In other words, with these settings, you tell the plugin what to retrieve from the
target web page.
These settings are basically composed of at least two inputs which are selector
and
attribute
, although some just have only selector
input. Additionally, a
Visual Inspector button and a button are available which are
used to find CSS selectors visually and to test whether the entered CSS selectors and attributes
can retrieve the information you want or not, respectively. A few settings of this type are shown
in Fig. 12.1 through Fig. 12.7.
Note
Some of the settings also have an Options Box button . To learn how to use it, please refer to Options Box.
- Selector
In this input, you should enter one or more CSS selectors. The CSS selector(s) will be used to locate one or more HTML elements available in the target web page’s source code.
Tip
If you want to enter more than one CSS selector, just put a
,
between the CSS selectors, such as#selector-1, .selector-2
.The plugin’s Visual Inspector tool is used to find CSS selectors just by clicking to elements in the target web page. However, you might need more complex CSS selectors to exactly match the elements you want. CSS selectors is a very broad topic and easy to learn. You can check out some written [1] [2] and video [3] tutorials on the Internet to learn more about them and how to use them.
- Attribute (optional)
In this input, you should enter an attribute name of the HTML element(s) that the CSS selector, which is entered into
selector
input, matches.For example, let’s consider the following
img
element:<img src="source.jpg" title="An image" alt="The image element's alternative text">
This
img
element has 3 attributes which aresrc
,title
, andalt
. These are the attributes you can enter into this input if the CSS selector entered intoselector
input matches thisimg
element. There are many other HTML elements and attributes. You can just observe the HTML element, check out its attributes, and enter that into this input.Note
You do not have to enter an attribute name into this input. This is optional. If you want to get the information stored in an attribute, you can enter that attribute’s name in this input to get that information.
The plugin also adds two more attributes. The first one is
text
. When you writetext
into this input, the text of the element is retrieved. The other one ishtml
. When you writehtml
, the outer HTML code of the element is retrieved.
The following video demonstrates an example usage of this type of a setting. The test results show what the plugin will retrieve from the target site by using your configuration.
Footnotes