Accessing DOM in Source Code

56 views
Skip to first unread message

junai...@gmail.com

unread,
Dec 15, 2017, 11:26:09 AM12/15/17
to blink-dev
Hello,

I am looking for a way to read DOM in chromium code. Is DOM tree stored in a data structure? I am looking for the object in source code that holds DOM data. Then blink or the render engine will read and use this tree to print the layout (after parsing the page).

I need a pointer to the source code, as I am not able to find it in the code. Any help would be appreciated.


Thanks,

Junaid

Ian Clelland

unread,
Dec 15, 2017, 12:20:44 PM12/15/17
to junai...@gmail.com, blink-dev
You are probably looking for code in https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom -- that directory holds the classes which make up the DOM tree. Every element in the tree is a subclass of Node (https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Node.h), and so the whole DOM tree is stored as a Node object, which has child nodes (which in turn have their own children, and so on).

In practice, the root of the DOM tree for a particular HTML document will be a Document object (https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Document.h) which is owned by the LocalDOMWindow (https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/frame/LocalDOMWindow.h).

(I'm sure this is drastically oversimplifying things, for the sake of getting you started -- the best way to find out more is to start there and read through the source code. https://cs.chromium.org is a great resource for following the code, if you're not using it already)

Ian


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/69266dd8-c7e5-4c92-b97c-25f14f79120d%40chromium.org.

Junaid Iqbal

unread,
Dec 15, 2017, 1:30:53 PM12/15/17
to blink-dev, junai...@gmail.com
Thanks Ian for taking time to answer my question. I appreciate your help. You explained it very well and now I know where to start. I will look through the code to understand the flow and will ask here if I stuck somewhere. 

Cheers!

Daniel Bratell

unread,
Dec 18, 2017, 10:08:33 AM12/18/17
to blink-dev, junai...@gmail.com
You will find most of the code in the chromium/src/third_party/WebKit/Source/core/dom folder. Document.h represents the typical root element. The nodes are linked together using ContainerNode. The files are named as the classes which have the same name as the IDL types (Node, Element, ...) so you should be able to find your way around the classes and methods. 

showTree is a debug function for printing the document tree and may be a good entry point: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Node.h?type=cs&q=showtree&l=1061

/Daniel
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.



--
/* Opera Software, Linköping, Sweden: CET (UTC+1) */
Reply all
Reply to author
Forward
0 new messages