Dom操作

基础

Dom 即document

1、找到标签：
　　获取单个元素               document.getElementById('i1');
　　获取多个元素（列表）  　　　　document.getElementsByTagName（‘div’）;
　　获取多个元素（列表） 　　 　　document.getElementsByClassName（‘div’）;

2、操作标签：
　　获取标签中的文本内容：
　　　　标签.innerText
　　对标签内容赋值：
　　　　标签.innerText = ‘’

示例

document.getElementById('i1')
<div id="i1">欢迎来到这里</div>

document.getElementById('i1').innerText
"欢迎来到这里"

document.getElementById('i1').innerText = 'test javascript'
"test javascript"

document.getElementsByTagName('a')
(3) [a, a, a]length: 30: a1: a2: a__proto__: HTMLCollection

document.getElementsByTagName('a')[0]
<a>532</a>

document.getElementsByTagName('a')[1]
<a>213123</a>

document.getElementsByTagName('a')[2]
<a>343415</a>

for (var i=0;i<document.getElementsByTagName('a').length;i++){document.getElementsByTagName('a')[i].innerText=8888;}
8888

Dom操作之间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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

示例

当前标签内里的文本内容

classname 直接对样式整体做操作

tag
<div id="i6">间接test javascript</div>

tag.classList
[value: ""]

tag.className='c1';
"c1"

tag.classList
["c1", value: "c1"]

tag
<div id="i6" class="c1">间接test javascript</div>

tag.className='c2';
"c2"

tag
<div id="i6" class="c2">间接test javascript</div>

tag.classList.add('c3')
undefined

tag
<div id="i6" class="c2 c3">间接test javascript</div>

tag.classList.remove('c2')
undefined

tag
<div id="i6" class="c3">间接test javascript</div>

dom操作之搜索框关键字清空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <input id="i1" onfocus="Focus();" onblur="focus2();" type="text" value="请输入关键字" />
    </div>
    <script>
        function Focus() {
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val == "请输入关键字"){
                tag.value="";
            }
        }

        function focus2() {
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val.length==0){
                tag.value="请输入关键字";
            }
        }
    </script>
</body>
</html>

dom基础样式操作

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value      
input     value获取当前标签中的值
select     获取选中的value的值
textarea    value获取当前标签中的值

示例

class操作

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

obj = document.getElementById('i3')
obj.style.fontSiz='16px';
obj.style.backgroundColor='red';


设置属性：

setAttribute('type','input')        设置一个type标签，类型为text
getAttribute
removeAttribute

创建标签并添加到html

示例一


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

创建标签示例二

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="+" onclick="addele();"/>
    <div id="i1">
        <p><input type="text"></p>
        <hr>
    </div>
    <script>
        function addele() {
            //创建标签
            //将标签添加到i1里
            var tag = "<p><input type='text'/></p>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
    </script>
</body>
</html>

操作标签

// 方式一

var obj = "<input type='text' />";

xxx.insertAdjacentHTML("beforeEnd",obj);

xxx.insertAdjacentElement('afterBegin',document.createElement('p'))


//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'



// 方式二

var tag = document.createElement('a')        ##创建一个a标签

xxx.appendChild(tag)

xxx.insertBefore(tag,xxx[1])

表单提交

document.geElementById('').submit()

其他操作


console.log                 输出框
alert                       弹出框
confirm                     确认框

 
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
 

// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

dom事件

绑定事件的两种方式：

直接标签绑定，标签里onclick=‘xxx()’
先获取dom对象，然后就行绑定（事件，结构，样式分离页面）

　 this，当前触发事件的标签

示例鼠标放到表格上自动变色

<body style="border:0;">
    <table border="1" width="200px">
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
    <script>
            var tag = document.getElementsByTagName('tr');
            for(var i=0;i<tag.length;i++){
                tag[i].onmouseover = function () {            
                    this.style.backgroundColor = 'red';            ###this指当前点击的标签

                };
                tag[i].onmouseout = function () {
                    this.style.backgroundColor = '';                ###this指当前点击的标签

                }
            }
    </script>
</body>

示例：依次执行多个事件

<style>
        #main{
            background-color: #0e90d2;
            width: 500px;
            height: 500px;
        }
        #content{
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain = document.getElementById('main');
        var mycontent = document.getElementById('content')

        mymain.addEventListener('click',function () {console.log('mian')},true);
        mycontent.addEventListener('click',function () {console.log('content')},true)
    </script>
</body>

addEventListener方法： 三个参数 事件，函数，true/false(决定打印输出的顺序)

posted @ 2018-05-09 21:50 FRESHMANS 阅读(182) 评论(0) 收藏举报

刷新页面返回顶部

FRESHMANS

Dom操作

基础

Dom操作之 间接查找

dom操作之搜索框关键字清空

dom基础样式操作

dom事件

公告

Dom操作之间接查找