码迷,mamicode.com
首页 > Web开发 > 详细

js的常规操作 -- dom

时间:2020-01-02 20:16:09      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:北京   replace   function   string   上传文件   reload   文件中   对象模型   for循环   

html是一门 超文本标记语言,css层叠样式表 用来渲染页面样式,js 解释型编译语言,基于web开发的脚本语言,用来实现页面一系列的动作

js--dom语言的常用方法

1.window的常规动作

window对象
window.innerHeight - 获取浏览器窗口的内部高度 window.innerWidth - 获取浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口


window对象的子对象
浏览器对象 navigator

navigator.appName  // Web浏览器全称 navigator.appVersion  // Web浏览器厂商和版本的详细字符串 navigator.userAgent  // 客户端绝大部分信息 navigator.platform   // 浏览器运行所在的操作系统

screen对象

  screen.availWidth - 获取可用的屏幕宽度  

  screen.availHeight - 获取可用的屏幕高度

history对象
history.forward()  // 前进一页
history.back()  // 后退一页

location对象
location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹出框
警告框:alert("你看到了吗?");
提示框:prompt("请在下方输入","你的答案"
确认框:confirm("你确定吗?")

计时相关 在间隔多久执行一个js语句
setTimeout() setTimeout("JS语句",毫秒) 间隔多久执行一次,相当于延时器
clearTimeout() clearTimeout(setTimeout_variable)
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

  setInterval()     setInterval("JS语句",时间间隔)   会间隔多久执行一次

  clearInterval()   clearInterval(setinterval返回的ID值)

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

2.DOM 概念:

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。 

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树

html(根节点) ==> body==> 元素标签节点==> 属性节点

 

JavaScript 可以通过DOM创建动态的 HTML:

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

元素(标签)的增删查改

查:查找(标签)元素  

直接查找   与  间接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素   

 

创建(标签)元素     

创建一个(标签)元素:var divEle = document.createElement("div");

为元素追加一个子节点:somenode.appendChild(newnode);

放到某个子元素的前面: somenode.insertBefore(newnode,某个节点);

删除子节点(标签)元素:语法:获得要删除的元素,通过父元素调用该方法删除

                                     somenode.removeChild(要删除的节点)

替换子节点(标签)元素: 语法:   替换somenode.replaceChild(newnode, 某个节点);

 

属性节点(标签) 元素:

文本操作

   获取属性节点的值:    

var divEle = document.getElementById("d1")
divEle.innerText   获取文本
divEle.innerHTML   获取所有

   设置属性节点的值

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

属性操作:

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")      设置属性和值
divEle.getAttribute("age")           获取属性值
divEle.removeAttribute("age")        删除属性

获取值操作   语法:elementNode.value

适应于以下标签: input  select  textarea     

var iEle = document.getElementById("i1");
console.log(iEle.value);   
输入框 输入值时,或下拉框选择值时,可以通过ele.value的方式获取输入框中的值
特别注意 上传文件的输入框 通过ele.value的方式只能获取文件的路径,获取文件对象的方法是:ele.files[0]

class操作      

 作用:用来给一个元素添加样式   ,样式一般在css文件中已经定义好了  

获取所有样式类的类名:  ele.classList             [‘bg_red‘,‘c1‘,bg_green]

classList.remove(cls) 删除指定类

classList.add(cls) 添加类        给一个元素添加一个样式

classList.contains(cls) 存在返回true,否则返回false

classList.toggle(cls) 存在就删除,否则添加

指定css操作    :     语法:元素对象.style.background = "red"   

obj.style.backgroundColor="red"
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:
obj.style.margin
obj.style.width
obj.style.left
obj.style.position

 2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件:一般用于触发 html的(action)动作

常用事件:

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

事件的两种绑定方式:

<button onclick = "func()">按钮1</button>   //方式一   在元素中   ‘事件名 = “函数”’
btnEle.onclick = function () {   // 方式二  通过“元素.事件名= 函数”   一旦事件被触发就会执行函数体代码
        alert(456)
    }

事件实例:

1. 光标聚焦和离开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" value="你追我">


<script>
    var ipEle = document.getElementById(‘d1‘);
    ipEle.onfocus = function () {  // 获取焦点之后 将默认的文本内容清空
        ipEle.value = ‘‘;  // 不加参数就是获取 加了参数就是设置
    };
    ipEle.onblur = function () {  // 鼠标移出(失去焦点) 给input框再设置一个默认值
        ipEle.value = ‘下次记得再来看我哟~‘
    }
</script>
</body>
</html>

2. 动态显示时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>


<script>
    var ipEle = document.getElementById(‘d1‘);
    var btn1Ele = document.getElementById(‘b1‘);
    var btn2Ele = document.getElementById(‘b2‘);
    // 先定义一个变量用来存储定时器
    var t = null;
    function showTime() {
        var currentTimeXXX = new Date();
        ipEle.value =  currentTimeXXX.toLocaleString();  // 转换成当地时间
    }

    // 开始按钮绑定事件
    btn1Ele.onclick = function () {
        if(!t){
             t = setInterval(showTime,1000);  // 每隔一秒钟执行一次
        }

    };
    // 结束按钮绑定事件
    btn2Ele.onclick = function () {
        clearInterval(t);  // 取消定时器
        // 还需要手动将t置位null
        t = null;
    }

</script>
</body>
</html>

3.省市联动    let 局部变量   var  声明全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="province"></select>


<select name="" id="city"></select>

<script>
    data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        ‘上海‘: [‘徐汇区‘,‘黄埔区‘],
        ‘深圳‘: [‘保安区‘,‘南山区‘]
    };
    let proEle = document.getElementById(‘province‘);
    let cityEle = document.getElementById(‘city‘);
    // 先获取一个个的省份信息
    for(let i in data){
        // 由于select标签中 一个个的选项就是一个个的option标签 所以我们需要自己手动创建该标签
        // 先创建一个option标签
        let opEle = document.createElement(‘option‘);
        // 给标签设置value属性
        opEle.value = i;
        // 给标签设置内部文本
        opEle.innerText = i;
        // 将创建好的option标签添加到select框中
        proEle.appendChild(opEle)
    }
    proEle.onchange = function () {  // 文本域改变自动触发
        // 先将第二个select框内容清空 再做添加操作
        cityEle.innerHTML = ‘‘;

        let currentPro = this.value;
        // 根据用户点击的省获取对应的市信息
        let currentCity = data[currentPro];
        // for循环市信息 动态创建option标签 一个个放入第二个select框中
        for(let i=0;i<currentCity.length;i++){
            let opEle = document.createElement(‘option‘);
            opEle.value = currentCity[i];
            opEle.innerText = currentCity[i];
            // 将创建好的option标签放入第二个select框中
            cityEle.appendChild(opEle)
        }
    }

</script>
</body>
</html>

  

  

  

 

 

 

js的常规操作 -- dom

标签:北京   replace   function   string   上传文件   reload   文件中   对象模型   for循环   

原文地址:https://www.cnblogs.com/bigbox/p/12141557.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!