文档章节

python 之 前端开发( DOM操作)

o
 osc_g8254g7s
发布于 2019/08/19 22:02
字数 1861
阅读 19
收藏 0

精选30+云产品,助力企业轻松上云!>>>

11.47 DOM操作

查找节点:

11.471 直接查找
document.getElementById           //根据ID获取唯一一个标签
document.getElementsByClassName   //根据class属性获取一系列标签
document.getElementsByTagName     //根据标签名获取一系列标签
11.472 间接查找
语法 含义
childNodes 获取所有的子节点,除了元素还有文本等
children 获取所有元素子节点,不包含文本
parentNode 获取父节点
previousSibling 获取上一个兄弟节点,不包含文本
previousElementSibling 获取上一个兄弟元素节点,包含文本
nextSibling 获取下一个兄弟节点,不包含文本
nextElementSibling 获取下一个兄弟元素节点,包含文本
firstChild 获取第一个子节点,不包含文本
firstElementChild 获取第一个子节点,包含文本
lastChild 获取最后一个子节点,不包含文本
lastElementChild 获取父元素最后一个元素节点,包含文本
11.473 增加节点
1、创建新节点
var divEle = document.createElement('div');
2、追加一个子节点(放到最后)
父节点.appendChild(新的子节点);
3、插入一个子节点(插入到某个节点前)
父节点.insertBefore(新的子节点,某个节点); 
4、克隆节点
要复制的节点.cloneNode();       //括号里不带参数和带参数false:只复制节点本身,不复制子节点。
要复制的节点.cloneNode(true);   //带参数true:既复制节点本身,也复制其所有的子节点。
11.474 删除、替换节点
父节点.removeChild(要删除的子节点);
父节点.replaceChild(新的子节点, 某个子节点); 
11.475 修改/设置节点属性
1、获取文本节点的值:
var divEle = document.getElementById("d1")
divEle.innerText                            //只查看所有标签内的文本                   
divEle.innerHTML                            //查看所有子标签,包括文本和子标签
2、设置文本节点的值:
var divEle = document.getElementById("d1")
divEle.innerText="1"                //先清空节点内容,再添加文本(字符串:'<h1>我是h1</h1>')
divEle.innerHTML="<p>2</p>"         //先清空节点内容,可识别文本内的html标签(标签:'<h1>我是h1</h1>')
3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
4、自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
11.476 获取元素的值
适用于input、select、textarea标签
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value
11.477 class操作
var x=document.getElementById('div1')
​
x.classList.remove('col1')          //x.classList里删除class='col1'
x.classList.add('col1')             //x.classList里添加class='col1'
x.classList.contains('col1')        //x.classList里是否有class='col1'
x.classList.toggle('col1')          //没有就添加,返回true,有就删除,返回false
11.478 css操作
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
11.479 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时执行一段JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

1、常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
​
onfocus        元素获得焦点。               // 输入框
onblur         元素失去焦点。               //应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             //应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
​
onkeydown      某个键盘按键被按下。          //应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
​
onselect      //在文本框中的文本被选中时发生。
onsubmit      ///确认按钮被点击,使用的对象是form。

2、绑定方式

方式一:

行内绑定:直接通过div被点击来修改自身样式:

<body>
<div id="div1" onclick="changeColor(this)"> 我是div,点我 </div> 
<script>                                                  //this是实参,表示触发事件的当前元素
  function changeColor(ths) {
    ths.style.backgroundColor="green";                      //函数定义过程中的ths为形参
  }
</script>
</body>

通过button被点击来修改另一个div标签样式:

<body>
<input type="button" id="b1" value="开关" onclick="change()">
<div class="c1 bg-red"></div>
<script>                                              //<script>必须放在div定义后,可以放在body里
    function change() {                             
        var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1这个标签 
        c1Ele.classList.toggle("bg-green");                  // 修改classList
    }
</script>
</body>

方式二:

直接绑定匿名函数:直接通过div被点击来修改自身样式:

<body>
<div id="div1">来,点亮我的绿</div>
<script>
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function() {
        this.style.backgroundColor = 'red';
    }
</script>
</body>

通过button被点击来修改另一个div标签样式:

<body>
<input type="button" id="b2" value="开关">
<div class="c1 bg-red"></div>
<script>
    function change() {
        var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1这个标签
        c1Ele.classList.toggle("bg-green");                 // 修改classList
    }
    var b2Ele = document.getElementById("b2");               // 通过JS代码绑定事件
    b2Ele.onclick = ()=>{
        change();
    }
</script>
</body>

方式三:

先单独定义函数,再绑定

<div id="box1" ></div>
<script>
    var div1 = document.getElementById("box1");
    div1.onclick = fn;              //注意,这里是fn,fn代表的是整个函数,fn()指的是返回值。
    function fn() {                 //单独定义函数
        alert("我是弹出的内容");
    }
</script>
11.4791 定时器
<body>
<input type="button" id="b1" value="开始">
<input type="button" id="b2" value="停止">
<input type="text" id="i1">
<script>
    var t;
    function showTime() {      
        var now = new Date();            // 将当前时间填写到i1中
        var i1Ele = document.getElementById("i1");
        i1Ele.value = now.toLocaleString();
    }
    showTime();                         //1找到开始按钮,给它绑定事件,点击后每隔1秒执行一次showTime()
    var b1Ele = document.getElementById("b1");
    b1Ele.onclick = function () {
        if (!t){
           t = setInterval(showTime, 1000); 
        }
    };
    var b2Ele = document.getElementById("b2");//2找到停止按钮,给它绑定事件,点击之后就清除定时器
    b2Ele.onclick = function () {       
        clearInterval(t);             // 清除的是定时器,
        console.log(t);
        t = undefined;               //t只是一个普通的变量,它保存了定时器的id值,清除定时器后t中还有值
    };
</script>
</body>
定时器
11.4792 输入框聚焦
<body>
<input type="text" id="i1" value="海飞丝">
<input type="text" id="i2" value="辣条" onfocus="f1(this);" onblur="f2(this);">
<script>                                    //this指的是当前事件的标签对象
    //方式一
    function f1(ths) {
        ths.value = "";
    }
    function f2(ths) {
        ths.value = "辣条";
    }
​
    //方式二
   var i1Ele = document.getElementById("i1");
   i1Ele.onfocus = function () {                // 给i1设置获取光标的事件
       this.value = "";
   };
   i1Ele.onblur = function () {
       this.value = "海飞丝";                   // 给i1设置失去光标的事件
   }
</script>
</body>
View Code
11.4793 select联动
<body>
<select id="province">
    <option>请选择省:</option>
</select>
<select id="city">
    <option>请选择市:</option>
</select>
<script>
    var s1Ele = document.getElementById("province");
    var s2Ele = document.getElementById("city");
    var data = {"上海": ["黄浦区", "静安区"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    for (let k in data) {               // 将省直辖市数据填充到第一个select中
        //console.log(k);
        let tmp = document.createElement("option");
        tmp.innerText = k;
        s1Ele.appendChild(tmp);          // 将创建的tmp添加到第一个select中
    }
    s1Ele.onchange = function () {      // 当第一个select框的值发生变化之后才去更新第二个select框
        s2Ele.innerHTML = "";           //第二次选择区时清空第二个select框的option选项
        let p = document.createElement("option");//恢复默认选项'请选择省市'
        p.innerText = "请选择市";
        s2Ele.appendChild(p);
        //console.log(this.value);
        let provine = this.value;       //拿到选择的省或直辖市
// 将province对应的区信息 填充到第二个select中
        for (let i = 0; i < data[provine].length; i++) {
            let tmp = document.createElement("option");
            tmp.innerText = data[provine][i];
            s2Ele.appendChild(tmp);
        }
    }
</script>
</body>
View Code
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

太白非技术类随笔(持续更新中...猛击这里!!!) python基础 python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅copy py...

osc_t0czpxet
06/13
0
0
小白学 Python 爬虫(28):自动化测试框架 Selenium 从入门到放弃(下)

人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学...

osc_tiaoycd5
04/16
10
0
太白教你学python---博客分类目录

太白非技术类随笔(持续更新中...猛击这里!!!) python基础 python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅copy py...

osc_1pgfn7k9
07/06
3
0
太白教你学python---博客分类目录

太白非技术类随笔(持续更新中...猛击这里!!!) python基础 python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅copy py...

osc_wtsf7p2s
2018/05/23
3
0
太白教你学python---博客分类目录

太白非技术类随笔(持续更新中...猛击这里!!!) python基础 python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅copy py...

太白*金星
2018/05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

敖丙20 张图揭开内存管理的迷雾

前言 之前有不少读者跟我反馈,能不能写图解操作系统? 既然那么多读者想看,我最近就在疯狂的复习操作系统的知识。 操作系统确实是比较难啃的一门课,至少我认为比计算机网络难太多了,但它...

敖丙
07/02
11
0
拉勾网拉你上勾

预览 需求简介 拉勾网是一个互联网行业的一个招聘网站,上面有许多职位,于是乎,小编想提取指定职位的基本信息(职位名,薪水,工作经验,工作地点,教育背景),然后插入 MongoDB 数据库,...

木下瞳
2019/04/17
14
0
我是一个线程(第一人称)

来源 | 转自 码农翻身 作者 | 刘欣 全文总共 | 4600 字 预计阅读时间 | 12 分钟 第一回 初生牛犊 我是一个线程,我一出生就被编了个号:0x3704,然后被领到一个昏暗的屋子里,在这里我发现了...

geniusian
2019/11/04
16
0
SkyWalking 权限认证

版本:7.0.0 描述 为了数据传输安全,确保网络连接是安全的。采用 Token 认证确保采集的应用数据是被信任的。 当前版本,仅支持简单的字符串 Token 配置 代理端配置文件agent.config设置 # ...

zm123321
27分钟前
17
0
是否允许实体正文进行HTTP DELETE请求? - Is an entity body allowed for an HTTP DELETE request?

问题: When issuing an HTTP DELETE request, the request URI should completely identify the resource to delete. 发出HTTP DELETE请求时,请求URI应该完全标识要删除的资源。 However,......

javail
昨天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部