JavaScript DOM manipulation can change the content, structure and style of a web page. We can use DOM manipulation elements to change the content, attributes, etc.

Change the element content

1. Content from the start position to the end position, but it removes HTML tags, as well as whitespace and newlines

element.innerText
Copy the code

2. All content from start to end, including HTML tags, with Spaces and line breaks

element.innerHTML
Copy the code

Example:

<body> <div></div> <p> I'm text <span>123</span> </p> <script> var div = document.querySelector('div'); Div. InnerText = '<strong> Today is: </strong> 2019'; // bold invalid div.innerhtml = '<strong> Today is: </strong> 2019'; </script> </body>Copy the code

InnerText vs. innerHTML

1) innerText does not recognize HTML tags; non-standard whitespace and line breaks are removed. 2) innerHTML identifies HTML tags. The W3C standard preserves whitespace and line breaksCopy the code

Attributes of common elements

SRC, href, ID, Alt, titleCopy the code

Example:

<body> <button id=" BTN "> Click to change the image attribute </button> <img SRC ="images/ lDH.jpg "Alt ="" title=" "> <script> // Modify the element attribute SRC // 1. Var BTN = document.getelementById (' BTN '); var img = document.querySelector('img'); Btn.onclick = function() {img.src = 'images/zxy.jpg'; // Change the image SRC img.title = 'clear and clear '; </script> </body>Copy the code

Attributes of form elements

Type, Value, Checked, selected, and disabledCopy the code

Example:

<body> <button> </button> <input type="text" value=" input content "> Var BTN = document.querySelector('button'); var input = document.querySelector('input'); Btn.onclick = function() {// input.innerhtml = 'click '; Input. value = 'clicked '; // This is a normal box like a div tag. // If you want a form to be disabled, you can't hit disabled. We want this button to be disabled. this.disabled = true; Display :block Displays elements. Btn. display='none'; } </script> </body>Copy the code

4. Style attribute operation

We can change the size, color, position and other styles of elements with JS.

Element. style inline style operation 2. Element. className className style operationCopy the code

Style sample:

<style> div { width: 100px; height: 100px; background-color: pink; } </style> <body> <div></div> <script> // 1. Var div = document.querySelector('div'); / / 2. Register event handlers div. The onclick = function () {/ / div. The inside of the style attribute Take the hump nomenclature this. Style. BackgroundColor = 'purple'; this.style.width = '250px'; } </script> </body>Copy the code

The className example:

<style> div { width: 100px; height: 100px; background-color: pink; } .change { background-color: purple; color: #fff; font-size: 25px; margin-top: 100px; } < / style > < body > < div class = "first" > text < / div > < script > / / 1. Use element.style to change the style of an element. If the style is small or simple use var div= document.querySelector('div'); div.onclick = function() { // this.style.backgroundColor = 'purple'; // this.style.color = '#fff'; // this.style.fontSize = '25px'; // this.style.marginTop = '100px'; // We can change the style of the element by changing the className of the element. // 3. // this.className = 'change'; // this.className = 'change'; This. className = 'first change'; } </script> </body>Copy the code

Note:

2.JS modify the style operation, resulting in inline style, CSS weight is higher 3. If the style changes a lot, you can change the element style by manipulating the class name. 5. ClassName changes the class name of the element directly, overwriting the original class name. (Use the multi-class name style if you want to keep the original style.)Copy the code

5. Operation of custom attributes

We use the element. attribute to get the value of the attribute. This method is used to get the built-in attribute. If we have a custom attribute, we use the following method:

// Get the attribute value element.getAttribute(' attribute '); // Set the attribute value element.setAttribute(' attribute ', 'value '); // Remove the attribute element.removeAttribute(' attribute ');Copy the code

Example:

<body> <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // (1) element. Properties of the console. The log (div. Id); //(2) element.getAttribute(' attribute ') get getAttribute(' attribute ' console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); // (1) element. attribute = 'value' div. Id = 'test'; div.className = 'navs'; // (2) element.setAttribute(' attribute ', 'value '); SetAttribute ('index', 2); div.setAttribute('class', 'footer'); Div. RemoveAttribute ('index'); div. RemoveAttribute ('index'); </script> </body>Copy the code

H5 gives us new custom attributes:

The purpose of custom attributes is to save and use data. Some data can be saved to a page instead of a database. Some custom attributes are ambiguous and it is not easy to determine whether they are built-in or custom attributes of an element. H5 specifies the custom attribute data- beginning as the attribute name and assigns a value. Settings:

<div data-index= "1" >< div> // or use JS to set element.setattribute (' data-index ', 2)Copy the code

Access to:

Element. getAttribute(' data-index '); Element.dataset. Index or element.dataset[' index '] // added in H5Copy the code

Example:

<body> <div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); // dataset is aset containing all console.log(div.dataset) attributes that start with data; // dataset is aset containing all console.log(div.dataset) attributes that start with data. console.log(div.dataset.index); console.log(div.dataset['index']); // If there are multiple -linked words in the custom property, we use the camel name console.log(div.dataset. ListName); console.log(div.dataset['listName']); </script> </body>Copy the code

Note: Attribute can operate on both custom and built-in Attribute values, but element. Property can only operate on built-in property values. In general, use the element. Attribute to operate built-in Attribute values and use the Attribute to operate custom Attribute values

summary