05: Dom

Posted 2020-10-16 不做大哥好多年

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了05: Dom相关的知识，希望对你有一定的参考价值。

1.1 使用Dom直接选择器和间接选择器获取标签

　　1、Dom作用

　　　　　　1. 通过 tag, name, id 等方式来查找html标签中的内容

　　　　　　2. 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口

　　　　　　3. 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式

　　　　　　4. DOM属于浏览器，而不是javascript语言规范里的规定的核心内容。

　　2、四种Dom直接选择器作用

　　　　　　1. document.getElementById 根据ID获取一个标签（字符串）

　　　　　　2. document.getElementsByClassName 根据class属性获取标签集合（数组）

　　　　　　3. document.getElementsByName 根据name属性获取标签集合（数组）

　　　　　　4. document.getElementsByTagName 根据标签名获取标签集合（数组）

# 1. 根据ID获取一个标签（字符串）
    document.getElementById(‘i1‘);                             # 通过标签id获取标签
    document.getElementById(‘i1‘).innerText = ‘新内容‘;         # 获取标签中的内容并附新值
    
# 2. 根据class属性获取标签集合（数组）
    document.getElementsByClassName(‘c1‘)                      # 获取所有class=’c1’的标签，以数组返回
    document.getElementsByClassName(‘c1‘)[0]                   # 得到所有匹配标签中的一个
    document.getElementsByClassName(‘c1‘)[0].innerText         # 获取标签中的内容

# 3. 根据name属性获取标签集合（数组）
    document.getElementsByName(‘i1name‘)                       # 获取所有name=’i1name’的标签并以数组形式返回
    document.getElementsByName(‘i1name‘)[0]                    # 获取第一个匹配的标签
    document.getElementsByName(‘i1name‘)[0].innerText          # 获取第一个匹配标签的值
    
# 4. 根据标签名获取标签集合（数组）
    document.getElementsByTagName(‘a‘);                        # 获取所有a标签（以列表形式返回）
    document.getElementsByTagName(‘a‘)[1];                     # 获取a标签列表中的第二个元素
    document.getElementsByTagName(‘a‘)[1].innerText = ‘sb‘;    # 将第二个a标签内容改成sb

四种DOM直接选择器

　　3、DOM间接选择器作用

　　　　　　1. parentElement // 父节点标签元素

　　　　　　2. children // 所有子标签

　　　　　　3. firstElementChild // 第一个子标签元素

　　　　　　4. lastElementChild // 最后一个子标签元素

　　　　　　5. nextElementtSibling // 下一个兄弟标签元素

　　　　　　6. previousElementSibling // 上一个兄弟标签元素

# parentNode                 // 父节点
# childNodes                 // 所有子节点
# firstChild                 // 第一个子节点
# lastChild                  // 最后一个子节点
# nextSibling                // 下一个兄弟节点
# previousSibling            // 上一个兄弟节点

# parentElement              // 父节点标签元素
# children                   // 所有子标签
# firstElementChild          // 第一个子标签元素
# lastElementChild           // 最后一个子标签元素
# nextElementtSibling        // 下一个兄弟标签元素
# previousElementSibling     // 上一个兄弟标签元素

更多间接查找

# 1. tag = document.getElementById(‘i1‘);      //首先找到id=i1的标签
# 2. tag.parentElement                         //找到id=‘i1‘父级div标签（也就是外层标签）
# 3. tag.parentElement.children                //通过父级标签找到所有子标签

间接查找举例

1.2 操作标签

　　1、对标签内容操作

　　　　　　　　tag = document.getElementById(‘i1‘); //首先找到id=i1的标签并赋值给tag

　　　　1. tag.innerText

　　　　　　　　作用： 只能获取指定标签的文本内容，如果标签中有其他子标签，自动忽略

　　　　　　　　tag.innerText="<a href=‘https://www.baidu.com‘>百度</a>" //将内容当字符串，替换对应的文本内容

　　　　2. tag. innerHTML

　　　　　　　　作用： 可以获取指定标签中所有内容，如果里面有很多子标签也能获取

　　　　　　　　tag.innerHTML = "<a href=‘https://www.baidu.com‘>百度</a>" //将内容当做a标签添加到模块中

　　　　3. tag.value

　　　　　　　　1、用来获取input框中输入的内容的值

　　　　　　　　2、可以用来获取select中选中对象对应的value值

　　　　　　　　3、可以获取textarea 多行文本中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto;">
    <!--onfocus 事件在对象获得焦点时发生自动执行Focus函数-->
    <!--onblur当焦点移出时自动执行Blur函数-->
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
</div>

<script>
    //1 当鼠标移到输入框，将输入框中内容清空
    function Focus(){
        var tag = document.getElementById(‘i1‘);    //获取输入框标签
        var val = tag.value;                        //获取输入框标签中的值
        if(val == "请输入关键字"){                  //将输入框中内容清空
            tag.value = "";
        }
    }

    //2 如果没有在输入框中写任何东西就移走，那么就重新写上“请输入关键字”
    function Blur(){
        var tag = document.getElementById(‘i1‘);
        var val = tag.value;
        if(val.length ==0){
            tag.value = "请输入关键字";
        }
    }
</script>
    <!--<input type="text" placeholder="请输入关键字" />   这个是新html内容，这句话就可以实现搜索框-->
</body>
</html>