DOM选择器 - 喵吉欧尼酱

dom选择器

 直接查找
        document.getElementById('i1')
        间接查找：
        文本内容操作：
        innerText 仅文本
        innerHTML 全内容
      value
        <input type="text" value="python"/> 获取单钱标签中的值
        select  获取选中的value
        <select id="xx"></select>
                      <options></opacity

文本操作：

onfocus   编辑框获取焦点

onblur    编辑款失去焦点

 <div style="width: 600px;margin: auto">
    <input id="i1" onfocus="Focus();" onblur="Blue();" type="text" value="请输入关键字"/>
  <input placeholder="请输入关键字" type="text" />

    </div>
<script type="text/javascript">
    function Focus() {
        var tag=document.getElementById('i1');
        var val=tag.value;
        if(val=="请输入关键字"){
            tag.value=""
        }

    }
    function Blue() {
        var tag=document.getElementById('i1');
        var val=tag.value;
        if(val==""){
            tag.value="请输入关键字"

    }}
</script>

样式操作

样式操作
className
classList
    classList.add
classList.remove

<style>
    .c1{
        font-size: 17px;
        background-color: cornflowerblue;
    }
        obj.style.fontSize="17px";  横杆被去掉用大些来临近
    
</style>

属性操作

<input style="color: black"  id="i1" type="text" value="wo hen lihai"/>


obj=document.getElementById('i1')  获取标签
<input style="color: black" id="i1" type="text" class="c1">
obj.setAttribute("class","c1") 增加属性class
<input style="color: black" id="i1" type="text" value="wo hen lihai" class="c1">
obj.removeAttribute('value') 移除属性
obj.attributes  获取所有属性标签
NamedNodeMap {0: style, 1: id, 2: type, 3: class, length: 4}

创建标签，并添加到html中

第一种方式

：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd 再前面后面旁边添加样式

<input type="button" onclick="Addlick(); "value="+" />

<div id="i1" >
<p><input type="text"/></p>

    <script>
        function Addlick() {
            var tag="<p><input type='text'/> </p>"
           document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag)

        }
    </script>

第二种方式

<input type="button" onclick="Addlick(); "value="+" />
<input type="button" onclick="Addlick1(); "value="+" />

<div id="i1" >
<p><input type="text"/></p>

    <script>
        function Addlick() {
            var tag="<p><input type='text'/> </p>"
           document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag)

        }
        function Addlick1() {
            var tag=document.createElement('input');  创建标签
                tag.setAttribute('type','text');  设置元素
                tag.style.fontSize='16px'; 设置字体
                tag.style.color='red';
            var p=document.createElement('p')   创建p标签
            p.appendChild(tag)

           document.getElementById('i1').appendChild(p) 将标签添加到i1 di下

        }
    </script>

提交表单

<form action="http://www.baidu.com">
<input type="text" onclick="Addlick(); "value="+" />
<input id="i1"  type="submit" value="提交 " />
<a onclick="submitForm();">任何标签都能提交</a>
</form>

    <script>
        function submitForm() {
           document.geElementById('form').submit()；

        }
    </script>

console.log 输出框

alert 弹出框

confirm 确认框取消框返回值true false

// URL和刷新

location.href 获取URL

location.href = "url" 重定向一个链接

location.reload() 重新加载刷新当前页

// 定时器

setInterval 设置多时定时器

obj=ssetInterval（function func（）{ }，5000）

clearInterval（obj）清除多次定时器

setTimeout 单次定时器，定时器只执行一次

clearTimeout 清除单次定时器

简单创建定时器只创建一次

<div id="i1"></div>
   <input type="button" value="删除" onclick="Delete();" />

<script>
    function Delete() {
        console.log('1');
        document.getElementById('i1').innerText = "已删除";
    }
var o2=setTimeout(function(){
    document.getElementById('i1').innerText = "";
 },2200) //创建定时器
clearTimeout(o2)
</script>

================================

行为样式相分离面（相互隔开不在一起）

    <style>
        #i1{
            background-color: cornflowerblue;
            width:200px;
            height:200px;

        }
    </style>
</head>
<body>
<div id="i1">程序</div>


<script>
 var mt=document.getElementById('i1')
    mt.onclick=function () {
        alert('??');

    }

</script>

表格操作，使是鼠标停在变颜色

常见代码写法

<table border="1" width="300px">
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>

    var my=document.getElementsByTagName('td');
    var len=my.length;
    for(var i=0 ;i<len;i++){
        my[i].onmouseover=function () {//鼠标炫富到某个元素上
          this.style.backgroundColor='red';
        }
        my[i].onmouseout=function () {//鼠标移除
          this.style.backgroundColor='';}
    }
</script>

绑定事件两种方法
a：直接标签绑定  onclick='xxx();'   onfocus
b：先获取Dom对象，然后进行绑定
    document.getElementById（'xxx'）.onclick
     document.getElementById（'xxx'）.onfocus
this 当前触发时间的标签
this 当前触发事件标签：
A:第一种绑定方式
<input type="button " onclick="Clickon(this)"/>
function ClickOn(self){//当前点击的标签}
B:第二种绑定方式
document.getElementById('xx').onclck

addEventListener 使用方法 绑定触发两个相同的log，对于多个默认从小到大冒泡   第三个参数为true时  反之

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

<script>
    var mydiv=document.getElementById('text')
  mydiv.addEventListener('click',function () {console.log('123412')},false)
    mydiv.addEventListener('click',function () {console.log('123')},false)
mydiv.addEventListener('click',function () {console.log('1424')},false)
addEventListener 用于相同元素
</script>

posted on 2017-09-23 16:10 喵吉欧尼酱阅读(143) 评论(0) 收藏举报

刷新页面返回顶部

喵吉欧尼酱

公告