DOM

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

一丶查找元素

1·直接查找

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

2·简介查找

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


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

二丶操作 

1丶内容

innerText             //文本
outerText
innerHTML       //HTML内容
innerHTML
value               //值

2丶属性

attrbutes                        //索取所有标签属性
setAttribute(key,value)    //设置标签属性
getAttribute(key)             //获取指定标签属性


/*
var atr = document.createAttribute("class");
atr.nodeValue = "democlass";
document.detElementById("n1").setAttributeNode(atr);
*/
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="bottob" value="全选" onclick="CheckAll();"/>
    <input type="bottob" value="取消" onclick="CheckAll();"/>
    <input type="button" value="反选" onclick="ReverseCheck();"/>
    <table border="1">
        <thead>
        </therd>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>
             <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>         
             <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>   
    </table>
    <script>
        function CheckAll(tha){
            var tb = document.getElementById("tb");
            var trs = tv.childNodes;
            for(var i=0;i<trs.lengt;i++){
               var current_tr = trs[i];
               if(current_tr.nodeType == 1){
                   var inp = current_tr.firstElementChild.getElementByTagName("input")[0];
                    inp.checked = true;
               }
            }
         }  
        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }
        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }


             
    </script>
 

3丶class操作

className                      //获取所有类名
classList.remove(cls)           //删除指定类
classList.add(cls)                 //添加类

4丶标签操作 

a·创建标签

//方式一

var tag = document.createElement("a")
tag.innerText = "Wyc"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wuyongcong"



//方式二

var tag = "<a class="c1" href = "http://www.cnblogs.com/wuyongcong">wuyongcong</a>"

b·操作标签 

//方式一

var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))

//注意:第一个参数只能是"beforeBegin","afterBegin","befoeEnd","afterEnd"


//方式二

var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5丶样式操作

var obj = document.getElementById("i1")

obj.style.fontSize = "32px";
obj.style.backgroundColor = "blue";
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color:gray;"/>
<script>
    function Focus(ths){
        ths.style.color = "black";
        if(ths.value == "请输入关键字" || ths.value.trim() == ""){
            ths.value = "";
        }
     }
     function Blur(ths){
         if(ths.value.trim() == ""){
           ths.value.color = "gray";
         }else{
                ths.style.color = "black";
         }
      }
</script>

6丶位置操作

//总文档高宽
document.documentElement.offsetHeight


//当前文档占屏膜高宽
document.documentElement..clientHeight


//自身高度
tag.offsetHeight


//距离上级定位高度
tag.offsetTop


//父定位标签
tag.offsetParent


//滚动高度
tag.scrollTop

/*
        clientHeight  -> 课件区域: height + padding
        clienTop    ->  border高度
        offsetHeight   ->  可见区域:height + padding + border
        offsetTop     ->  上级定位标签的高度
        scrollHeight     -> 全文高:height  +  padding
        scrollTop     ->   滚动高度
        特别的:
                document.documentElement代指文档根节点
*/

7丶提交表单  

document.getElementById("form").submit()

8丶其他操作

console.log        //输出框

alert                  //弹出框

confirm              //确认框


//    URL和刷新

location.href                 //获取URL

location.href = "url"           //重定向

location.reload()                 //重新加载


//定时器
setInterval                        //多次定时器

clearInterval                     //清除多次定时器

setTimeout                       //单次定时器

clearTimeout                      //清除单词定时器

三·事件  

 对于事件需要注意的要点:

        ·  this

        ·  event

        ·  事件链以及跳出

this标签当前正在操作的标签,event封装了当前事件的内容·

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML

    一个完整的网页是由HTML(超文本标记语言),css(层叠样式表)JavaScript(动态脚本语言)三部分组成.

    Wyc
  • go基础编程 day-1

            导入单个包                                                                   ...

    Wyc
  • 简单的线程说明

    线程也不是越多越好,具体案例,具体分析,(有几个线程创建几个线程,应为线程请求上下文时非常耗时)

    Wyc
  • 从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

    文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

    Daotin
  • quickGO:在线查询GO和GO注释信息的网站

    quickGO是EMBL-EBI发布的网站,通过该网站,可以快速的查询Go Terms和Go注释相关信息,官网如下

    生信修炼手册
  • 使用Spring StateMachine框架实现状态机

    Spring StateMachine框架可能对于大部分使用Spring的开发者来说还比较生僻,该框架目前差不多也才刚满一岁多。它的主要功能是帮助开发者简化状态...

    程序猿DD
  • 树莓派3B+创建WiFi热点 ,带 web管理界面

    树莓派系统安装及工具请百度其他教程安装,本文主要讲述如何如何通过树莓派创建WiFi热点。

    萌海无涯
  • HTML中的超链接

    超链接:也叫URL(Uniform Resource Locator),就是统一资源定位器。一般效果是我们点击网页上某个地方,网页会自动跳转到另外一个地方。 一...

    IT可乐
  • SpringBoot2集成redis,使用lettuce客户端

    Springboot集成redis大家都会用,主要就是使用RedisTemplate类来进行各种操作。可能很多人并没有注意,在Springboot2以后,底层访...

    天涯泪小武
  • 深度学习为何起作用——关键解析和鞍点

    用户1737318

扫码关注云+社区

领取腾讯云代金券