11-18 Study Summary (domsecondday)

DOM: Read Access Node object properties

1. Bulk Delete all child nodes under the parent element elem.innerhtml= "";
2. Bulk Replace all child nodes under the parent element elem.innerhtml= "HTML string consisting of all child element tags"
3. Everything obtained from the property and set to the value on the property must be a string so, you have to convert the type first, then calculate!

Gets the attribute value of the element

When looking for only one property value: var strvalue=elem.getattribute ("attribute name");

When traversing all attributes of an element:

1. Elem.attributes Collection: A Node object that contains all the properties of the current element
2. elem.attributes[i/"Property name"]--> returns an Attribute node object
3. elem.attributes[i/"Property name"].value--> property value

to modify the attribute value of an element : 2 kinds:
1. Elem.setattribute ("attribute name", "attribute value");
When to use: When setting only one property value
2. Elem.setattributenode (Attribute node object)

properties of the removed element:2 types:
1. Elem.removeattribute ("attribute name")
2. Elem.removeattributenode (Attribute node)

determines whether the specified attribute is included:1:
1. Elem.hasattribute ("attribute name")---there, true; no, false

Custom Attributes in H5: example A.setattribute ("age", 18);

H5 rules: All custom attributes are prefixed with a data-prefix gets the custom attribute value: A.dataset. Property name

Set custom property values: A.dataset. property name = value

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Modify Style

1. Get or modify the inline style only:

The style property of each element-->style object
All CSS style properties are included in the Style object, and the default value is ""
Elem.style. Property name = "Value";
Problem: Unable to get properties stacked or inherited in a style sheet
Only Elem inline styles are accessible (styles defined in the Style property)
2. Get the properties that cascade or inherit from the style sheet:
Dom Standard: var style object =getcomputedstyle (Elem);
Style object. Property name
Ie8:var Style object =elem.currentstyle;
Style object. Property name
Problem: You can only get styles and cannot modify styles
FIX: To modify:
Change inline: Only with Elem.style. Property name = "Value"
3. Change style in style sheet: 3 steps:
1. Get the style sheet object you want to modify:
var sheet=document.stylesheets[i];
2. Obtain the Cssrule to be modified:
Cssrule: The contents of each curly brace wrapped in a style sheet
var cssrule=sheet.cssrules[i]
3. Get or modify the properties in Cssrule
Cssrule.style. Property name = value
Question: Reaching
Workaround: Override properties in style sheets by directly modifying inline style properties

11-18 Study Summary (domsecondday)