前端学习之-- DOM

 

Dom == document

1：查找
　　1：直接查找
　　document.getElementById('i1') # 根据ID获取一个标签（获取单个元素）
　　document.getElementsByTagName('div') # 根据标签名获取标签集合（获取多个元素列表）
　　document.getElementsByClassName('c1') # 根据class属性获取标签集合（获取多个元素列表）
　　document.getElementsByName('n1') # 根据name属性获取标签集合
　　举例说明：
　　document.getElementById('i1') # 打印标签及内容
　　document.getElementById('i1').innerText # 打印标签里的内容
　　document.getElementById('i1').innerText = '学员jack' # 修改标签里的内容

　　document.getElementsByTagName('a') # 以数组格式返回所有的a标签
　　document.getElementsByTagName('a')[1] # 根据索引提取指定的标签
　　document.getElementsByTagName('a')[1].innerText # 提取指定标签里的内容
　　document.getElementsByTagName('a')[1].innerText = 'test' # 修改标签内容

2：间接查找
　　首先通过直接找定义要查找的标签，然后通过下面的方法进行间接找
　　　　- parentNode 父节点
　　　　- childNodes 所有子节点
　　　　- firstChild 第一个子节点
　　　　- lastChild 最后一个子节点
　　　　- nextSibing 下一个兄弟节点
　　　　- previousSibling 上一个兄弟节点

　　以下为重点掌握
　　　　- parentElement 父节点标签元素

　　　　- children 所有子标签
　　　　- firstElementChild 第一个子标签元素
　　　　- lastElementChild 最后一个子标签元素

　　　　- nextElementSibling 下一个兄弟标签元素
　　　　- previousElementSibling 上一个兄弟标签元素
　　举例：
　　tag = document.getElementById('i2') # 定位标签
　　tag.parentNode.previousElementSibling.children[1].innerText # 打印父标签的上一兄弟标签下的子标签索引号为1的内容
2：操作
　　1：文本内容操作
　　innerText：可获取标签内的文本，修改也只能是文本
　　效果如下：
　　　　<div id='i1'>oldboy <a>google</a></div>
　　　　通过ID查找后使用innerText显示输出如下：
　　　　oldboy google 表示内部的a标签已被忽略
　　innerHTML：获取标签内的全部内容，修改可以是标签内容。
　　效果如下：
　　　　<div id='i1'>oldboy <a>google</a></div>
　　　　通过ID查找后使用innerText显示输出如下：
　　　　oldboy<a>google</a> 内容和包含的标签全部会打印

　　value:可以获取输入框输入的内容，也可以修改
　　　　(input value获取标签内值）
　　　　(select 获取选中的value值），特有的属性：selectedIndex，就是根据索引位置操作值
　　textarea value获取其中的值
　　checkbox
　　　　checkbox对象.checked 获取值
　　　　checkbox对象.checked = 赋值

搜索框的示例

<div style="width:900px;margin:0 auto;">
    <!-- onfocus光标移入到搜索框 onblur光标移出搜索框-->
    <input id = 'i1' onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />
</div>
<script>
    function Focus(){
        var tag = document.getElementById('i1')
        var val = tag.value
        if (val=='请输入关键字'){
            tag.value=''
        }
    }
    function Blur() {
        var tag = document.getElementById('i1')
        var val = tag.value
        if (val.length==0){
            tag.value='请输入关键字'
        }
    }
</script>

View Code