javascript-dom文档对象模型2

Posted 狼来的日子里!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
View Code

搜索框

技术分享
<!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>
View Code

  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>
View Code

  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>
View Code

  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>
View Code

 



以上是关于javascript-dom文档对象模型2的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript-DOM(文档对象模型)

JavaScript-DOM(文档对象模型)

JavaScript-DOM对象

JavaScript-DOM(重点)

javascript-DOM

JavaScript-DOM