前端开发-DOM

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

 一 查找元素

1.1直接查找

1 document.getElementById             根据ID获取一个标签
2 document.getElementsByName          根据name属性获取标签集合
3 document.getElementsByClassName     根据class属性获取标签集合
4 document.getElementsByTagName       根据标签名获取标签集合

1.2间接查找

 1 parentNode          // 父节点
 2 childNodes          // 所有子节点
 3 firstChild          // 第一个子节点
 4 lastChild           // 最后一个子节点
 5 nextSibling         // 下一个兄弟节点
 6 previousSibling     // 上一个兄弟节点
 7  
 8 parentElement           // 父节点标签元素
 9 children                // 所有子标签
10 firstElementChild       // 第一个子标签元素
11 lastElementChild        // 最后一个子标签元素
12 nextElementtSibling     // 下一个兄弟标签元素
13 previousElementSibling  // 上一个兄弟标签元素

 

二、操作

2.1内容

1 innerText   仅仅文本   自动过滤内部标签
2 outerText
3 innerHTML   HTML内容:包含文本和内本的浅表
4 innerHTML  
5 value       值   input标签 文本框中的内容
           select 选中的值 还有一个特有的selectindex
           textarea

 

    <input id="i1" type="text" onfocus="fecus()" onblur="blu()"  value="请输入关键字">
    <div>onfocus 也适用于tab键</div>
    <div style="color: red">
        <input type="text" placeholder="请输入关键字">
    这种做法在目前只适合最新版本的浏览器,so目前推荐上面js的做法</div>
    <script>
        function fecus(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val=="请输入关键字"){
                tag.value='';
            }
        }
        function blu() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length==0){
                tag.value='请输入关键字';

            }
        }
    </script>
搜索框实现例子

 2.2 样式操作

  增加与删除样式

    obj.className

    obj.classList

      classList.add()

      classList.remove()

  

  设置样式的属性

    obj.style.color='red';

    obj.style.fontSize='16px';

2.3 属性操作

  获取属性    

    obj.attributes
    NamedNodeMap {0: id, 1: type, 2: onfocus, 3: onblur, 4: value, 5: class, 6: style, length: 7}

  添加属性

    obj.setAttribute('id','id1')

  删除属性

    obj.removeAttribute('id')

2.4  创建标签 并添加到指定位置

  创建标签有两种方法:1.通过字符串的方法  2.通过dom来穿件

      ps:jqure中并不具有创建标签的办法,so这里需要掌握!

<script>
        function addEle1() {
            var tag = '<p><input type="text" </p>';
            document.getElementById('i3').insertAdjacentHTML("beforeEnd",tag);
        }
        function addEle2() {
            var tag=document.createElement('input');
            tag.setAttribute('type','text')
            tag.style.color='red';
            tag.style.border='black 1px solid'

            var p=document.createElement('p');
            p.appendChild(tag);

            document.getElementById('i3').appendChild(p)
        }
    </script>
两种创建标签的办法

 2.5 实现表单的提交

  在html中 需要使用 form中的 <input type='submit'> 来实现

  在dom中,任何标签都可以显示表单的提交

 

2.6 其他操作

 1   alert          弹出消息
 2   console.log       在浏览器调试模式下输出
 3   confirm('真的要删除吗')      弹框确定
 4 //url操作
 5     location.href        获取当前网址
 6     location.href=' '   重定向
 7     location.reload()  页面刷新
 8 
 9 //定时器
10     setInterval(‘fuction’,5000)     一直在执行
11     clearIterval( obj)               清除setInterval对象
12     setTimeout(‘fuction’,5000)    只执行一次,5s之后再执行
13                             qq邮箱删除邮件,就使用了该技术
14     clearTimeout(obj)                与上个一样
    <div id="i1"></div>
    <input type="button" onclick="settime()" value="删除">
    <script>
        function settime(){
            document.getElementById('i1').innerText='已删除';
            setTimeout(function () {
                document.getElementById('i1').innerText='';
            },5000)
        }
    </script>
settimeout-case

三、事件

3.1 事件绑定方法

3.2 事件方法

posted @ 2017-12-14 22:45  娄先生  阅读(454)  评论(0编辑  收藏  举报
levels of contents