DOM (1): Get page elements, operation elements, custom attributes

Get page elements

1. Obtain by ID

Use the getElementById() method to obtain an element object with an ID in the following format:

var variable name = document.getElementById('id name');

For example:

<div id = 'time'>2022-12-18</div>
<script>
var times = document.getElementById('time')
console.log(times);
</script>

result:

Code two:

<script>
var times = document.getElementById('time')
console.log(times);
</script>
<div id = 'time'>2022-12-18</div>

result:

important point:

• JavaScript reads the code from top to bottom, and the variables in the script tag must be above the script tag. If written below it will show null
• The parameter id is a case-sensitive string and must be enclosed in quotation marks
• Returns an element object

2. Obtain elements according to the tag name
Method 1: Use the getElementsByTagName() method to obtain all tags, the format is as follows:

var variable name = document.getElementsByTagName('tag name');

Method 2: Get all child elements with a specified tag name inside an element (parent element)

var variable name = element.getElementsByTagName('tag name');

important point:

• The returned value is a collection of objects, if you need to get the elements inside, you need to traverse
• The resulting element object is dynamic
• The parent element must be a single object (which specific element object must be specified), and the parent element itself is not included when getting it.

For example:

Among them, the first one gets the element set, and the following for loop traversal gets the element object.

Example 2:

    <ul>
        <li>1你好</li>
        <li>2你好</li>
        <li>3你好</li>
    </ul>
    <ol id="oll">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ol>
    <script>
        //如果有两种li标签，如何准确获取页面元素
        //方法一：
        /*var ol = document.getElementsByTagName('ol');//此时返回的是伪数组元素[ol]
        console.log(ol.getElementsByTagName('li'));
        此时这个程序会报错，原因是因为伪数组元素不能作为父元素，父元素必须要指明是哪一个元素
        */
        var ols = document.getElementsByTagName('ol');//先将ol赋值给ols
        console.log(ols);
        console.log(ols[0].getElementsByTagName('li'));//ols作为伪数组，需要指定是哪一个特定的ol，因此要加上编号，在获取ol中的li

        //方法二
        //通过给ol赋id，有了id之后可以通过id进行查询
        var ol2 = document.getElementById('oll');//先查询到id为oll的赋给ol2
        console.log(ol2.getElementsByTagName('li'));//此时ol2已经是一个特定的数组，此时再通过标签名获取li不会再报错
    </script>

3. HTML5 new method to get elements

For example:

   <div class="box">1</div>
    <div class="box">2</div>
    <div class="box1">3</div>
    <div id="nav">
        <ul>
            <li>hello<>
            <li>你好<>
        </ul>
    </div>
    <script>
        //根据类名获取元素集合,返回值依旧是伪数组
        var box = document.getElementsByClassName('box');
        console.log(box);//返回的值为集合
        //querySelector返回指定选择器的第一个元素对象(不是集合)，选择器可以为任何类型,通过选择器加不同的符号
        var firstbox = document.querySelector('.box');//box前面加上点，表示类选择器
        console.log(firstbox);
        var navbox = document.querySelector('#nav');//使用#表示是id选择器
        console.log(navbox);
        var libox = document.querySelector('li');//返回第一个li对象
        console.log(libox);
        //querySelectorAll()返回的是指定选择器的所有对象集合
        var all = document.querySelectorAll('li');
        console.log(all);

    </script>

4. Get the body element and html element

Get the body element

document.body

get html element

document.documentElement

For example:

the result:

event

1. Event overview
JavaScript enables us to create dynamic pages, and events are behaviors that can be detected by JavaScript.

2. Three elements of an event

• Event source: the object on which the event was triggered
• Event type: the way the event is triggered, such as mouse click, keyboard press, etc.
• Event handler: the behavior that needs to be executed, usually through a function assignment

For example:

3. Steps to execute the event

1. get event source
2. Registration issue
3. Add event handlers (in function helper form)

operating elements

1. Change element content

method one:

element.innerText

Method Two:

element.innerHTML

Result:


Effect: Click the Get Current Time button, the first btn1 will display the event

When adding an event to change the content of the element, the change will only occur after the event is executed. For example, the first example in this example is to display the current time after clicking the mouse. If the second event is not added, then when the browser refreshes, will directly display the current time

The difference between element.innerText and element.innerHTML

Difference 1: innerText does not recognize html tags, but innerHTML does

Difference 2: innerText will not remove spaces and newlines, but innerHTML will

2. Element attribute operation

Changes to attributes such as src, href, id, alt, title, etc.
The format is generally:

tag name. attribute name = modified value

For example:

The effect is: click picture 1 and picture 2 at this time to display two different pictures, and other properties are similar

3. Attribute manipulation of form elements
Use DOM to manipulate the attributes of the following elements

type、vaule、checked、selected、disabled

Note: The value in the form cannot be changed through innerHTML and innerText, it is modified through value

For example:

<button>按钮</button>
<input type="text" value="请输入内容">
<script>
var btn = document.querySelector('button');
var input =document.querySelector('input');
 btn.onclick = function(){
    
    
    input.value = 'hello';//通过修改value值来进行表单按钮的修改
    //如果想要按钮点击之后禁用，通过disabled
    btn.disabled = true;
    //也可以通过this.disabled = true，这里的this指的是函数的调用者，即btn
    
 }

Before clicking:

After clicking:

Note: Because disabled is set, the content of the text box changes after clicking, and the button cannot be clicked

4. Style attribute operation

Modify the size, color, and position of elements through JS

1. element.style.property name inline style operation
2. element.className. attribute name class name style operation

5. Use className to modify the style

• When we modify a lot of styles, it is too troublesome to use element.style. At this time, we can use the className class name
• className will directly change the class name of the element and will overwrite the original class name
• The class referenced in className is written in css
  

custom attributes

1. Get attribute value

• element. attribute gets the built-in attribute value (the attribute that comes with the element itself)
• element.getAttribute('attribute'); Get custom attributes

For example:

result:

2. Set attribute values

• element.property sets built-in property values
• element.setAttribute('attribute'); Mainly set custom attributes

For example:

div.id = 'test';
//element.setAttribute('属性','值');
div.setAttribute('index',2);

3. Remove attributes

• element.removeAttribute('attribute');

The role of custom attributes: in order to be able to find the corresponding data and use