javascript-dom文档对象模型2

每个标签都是一个对象

一：查找元素

　　1、直接查找

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

　　2、间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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

二：操作元素

　　1、内容

innerText   文本

outerText

innerHTML   HTML内容

innerHTML

value       值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="i1">

        老男孩

        <a>谷<span>歌</span></a>

    </div>

    <input type="text" id="i2" />

    <select id="i3">

        <option value="11">北京1</option>

        <option value="12">北京2</option>

        <option value="13">北京3</option>

    </select>

    <textarea id="i4"></textarea>

</body>

</html>

搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 600px;margin: 0 auto;">

        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>

        <input type="text" placeholder="请输入关键字" />

    </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>

</body>

</html>

　　2、属性

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

getAttribute(key)         // 获取指定标签属性

　　增加输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

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

    <div id="i1">

        <p><input type="text" /></p>

    </div>

    <script>

        function AddEle1(){

            // 创建一个标签

            // 将标签添加到i1里面

            var tag = "<p><input type='text'/></p>";

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

            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

        function AddEle2(){

            // 创建一个标签

            // 将标签添加到i1里面

            var tag = document.createElement('input');

            tag.setAttribute('type', 'text');

            tag.style.fontSize = '16px';

            tag.style.color = 'red';

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

            p.appendChild(tag);

            document.getElementById('i1').appendChild(p);

        }

    </script>

</body>

</html>

　　3、class操作

className                // 获取所有类名

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

classList.add(cls)       // 添加类

　　4、标签操作

　　 1）字符串形式
　　 2）对象方式
　　 docment.createElement()

　　例子同上

　　　5、样式操作

##dom-输入框鼠标移动到输入框去除默认值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="margin: 0 auto">

        <input id="i1" type="text" value="请输入关键词" onfocus="Focus();" onblur="Blur();"/>

        <!-- 新浏览器直接支持下面方式-->

        <input type="text" placeholder="请输入关键词">

    </div>

    <script>

        function Focus(){

            var tag=document.getElementById("i1")

            var value=tag.value

            if (value=="请输入关键词"){

                tag.value=""

            }

        }

        function Blur(){

            var tag=document.getElementById("i1")

            var value=tag.value

            if (value==""){

                tag.value="请输入关键词"

            }

        }

    </script>

</body>

</html>

　　6、位置操作

总文档高度

document.documentElement.offsetHeight

当前文档占屏幕高度

document.documentElement.clientHeight

自身高度

tag.offsetHeight

距离上级定位高度

tag.offsetTop

父定位标签

tag.offsetParent

滚动高度

tag.scrollTop

/*

    clientHeight -> 可见区域：height + padding

    clientTop    -> border高度

    offsetHeight -> 可见区域：height + padding + border

    offsetTop    -> 上级定位标签的高度

    scrollHeight -> 全文高：height + padding

    scrollTop    -> 滚动高度

    特别的：

        document.documentElement代指文档根节点

*/

　　7、提交表单

document.geElementById('form').submit()

　　8、其他操作

console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

##定时器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="li"></div>

    <input type="button" value="增加提示" onclick="tip();">

    <script>

        function clear(){

            var tag=document.getElementById("li");

            tag.innerText="";

        }

        function tip(){

            var tag=document.getElementById("li");

            tag.innerText="提示信息";

            setTimeout("clear()",300);

        }

    </script>

</body>

</html>

巴特西

javascript-dom文档对象模型2

一：查找元素

1、直接查找

2、间接查找

二：操作元素

1、内容

最新文章

热门文章