Скачать презентацию Client-side Java Script Part 1 q DOM Скачать презентацию Client-side Java Script Part 1 q DOM

Client-side JavaScript - part 1 - DOM.pptx

  • Количество слайдов: 10

Client-side Java. Script Part 1 Client-side Java. Script Part 1

q DOM – объектная модель документа • • Узлы Обход DOM Свойства узлов Атрибуты q DOM – объектная модель документа • • Узлы Обход DOM Свойства узлов Атрибуты узлов Добавление и удаление узлов Поиск и выбор элементов Стили и классы

q DOM – объектная модель документа v Узлы <html> <head> <body> <title> ‘Sample’ ‘Document’ q DOM – объектная модель документа v Узлы ‘Sample’ ‘Document’ <p> <h 1> ‘This is a’ <em> ‘document’ ‘simple’ <html> <head> <title>Sample Document

This is a simple document

q DOM – объектная модель документа v Узлы v Обход DOM <html> <head> document. q DOM – объектная модель документа v Узлы v Обход DOM document. Element ‘Document’ <p> <h 1> ‘Sample’ document. body ‘This is a’ <em> ‘document’ ‘simple’ <html> <head> <title>Sample Document

This is a simple document

q DOM – объектная модель документа v Узлы v Обход DOM • • child. q DOM – объектная модель документа v Узлы v Обход DOM • • child. Nodes - все дочерние элементы children – только теги document. body. child. Nodes[0 ] document. body. children[0] • • first. Child – первый потомок last. Child – последний потомок body. first. Child === body. child. Nodes[0] body. last. Child === body. child. Nodes[body. child. Nodes. length-1 ] • • • parent. Node - родительский узел previous. Sibling – левый сосед next. Sibling – правый сосед

q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов • Тип узла - node. Type 1 Element nodes 3 • Тип узла Text nodes Имя узла - node. Name/tag. Name document. body. node. Name document. body. child. Nodes[0]. node. Name document. body. tag. Name // ‘BODY’ // ‘#text’ // ‘BODY’ • Содержимое узла inner. HTML – для узлов-элементов document. body. inner. HTML // node. Value/data – для текстовых узлов document. body. child. Nodes[0]. node. Value //

q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов v Атрибуты узлов • • • has. Attribute(name); get. Attribute(name); set. Attribute(name, value); remove. Attribute(name). elem. attributes document. body. children[0]. set. Attribute(‘class’, ‘c 1’) document. body. children[0 ]. class. Name // ‘c 1’ document. body. attributes[0]. name document. body. attributes[0]. value

q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов v Атрибуты узлов v Добавление и удаление узлов • create. Element(tag) var div = document. create. Element('div '); • create. Text. Node(text) var text. Elem = document. create. Text. Node (‘Text'); • clone. Node(boolean) var new. Elem 1 = elem. clone. Node(true); var new. Elem 2 = elem. clone. Node(false); • • parent. Elem. append. Child(elem) parent. Elem. insert. Before(elem, next. Sibling) parent. Elem. remove. Child(elem) parent. Elem. replace. Child(elem, current. Elem)

q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов v Атрибуты узлов v Добавление и удаление узлов v Поиск и выбор элементов • by ID var section 1 = document. get. Element. By. Id("section 1"); • by Name var buttons = document. get. Elements. By. Name(" fav"); • by Type var spans = document. get. Elements. By. Tag. Name("span"); var firstpara = document. get. Elements. By. Tag. Name("p")[0]; var first. Para. Spans = firstpara. get. Elements. By. Tag. Name("span "); • by CSS Class (IE>9) var warnings = document. get. Elements. By. Class. Name("warning"); • with CSS Selectors var elements = document. query. Selector. All('UL > LI: last-child'); var elements = document. query. Selector('UL > LI: last-child') == var elements = document. query. Selector. All('UL > LI: last-child')[0]

q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов q DOM – объектная модель документа v Узлы v Обход DOM v Свойства узлов v Атрибуты узлов v Добавление и удаление узлов v Поиск и выбор элементов v Стили и классы • HTML-атрибут class document. body. class. Name += ' class 3'; • CSS-свойства стилей e. style. position = "absolute"; e. style. left = "300 px"; e. style. css. Float = "left "; • Текущее значение свойства стиля get. Computed. Style(elem, null). margin. Top; get. Computed. Style(elem, ‘hover’). margin. Top; elem. current. Style. margin. Top ; // IE