DOM增删改

<div>
        <ul id="city">
            <li id="bj">北京</li>
        </ul>

    </div>
    <div class="btn">
        <button id="btn1">创建一个“广州”节点，添加到#city下</button>
        <button id="btn2">将“广州”节点插入到bj前面</button>
        <button id="btn3">广州节点替换北京节点</button>
        <button id="btn4">删除北京节点</button>
    </div>

var myClick = function (btn, fun) {
        var btn = document.getElementById(btn);
        btn.onclick = fun;

    }
    window.onload = function () {
        //创建一个“广州”节点，添加到#city下
        myClick("btn1", function () {
            //document.createElement()可以用于创建一个元素节点对象
            //它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
            //并将创建好的对象作为返回值返回
            var li = document.createElement("li");
            var gzText = document.createTextNode("广州");
            //document.createTextNode()可以用来创建一个文本节点对象，需要一个文本内容作为参数
            //将会根据该内容创建文本节点，并将新的节点返回

            /* * 将gzText设置li的节点 * appendChild()-向父节点中添加一个新的字节点 * - 用法：父节点.appendChild(子节点); */
            li.appendChild(gzText);
            var city = document.getElementById("city");
            city.appendChild(li);
        });

        //将“广州”节点插入到bj前面
        myClick("btn2", function () {
            //创建广州
            var li = document.createElement("li");
            var gzText = document.createTextNode("广州");
            li.appendChild(gzText);
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取父节点city
            var city = document.getElementById("city");
            //inserBefore
            //- 可以在指定的字节点前插入新的子节点
            // 父节点.inserBefore(新节点,旧节点)
            city.insertBefore(li, bj);
        });


        //广州节点替换北京节点
        myClick("btn3", function () {
            //创建广州
            var li = document.createElement("li");
            var gzText = document.createTextNode("广州");
            li.appendChild(gzText);
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取父节点city
            var city = document.getElementById("city");
            //replaceChild
            //- 可以在指定的字节点替换新的子节点
            // 父节点.replaceChild(新节点,旧节点)
            city.replaceChild(li, bj);
        });

        //删除北京节点
        myClick("btn4", function () {
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取父节点city
            var city = document.getElementById("city");
            /* * removechlid() * - 删除子节点 * - 语法：父节点.removeChild(子节点); * */
           city.removeChild(bj);
        });
    }
</script>

其中第一步的“创建一个“广州”节点，添加到#city下”，用第二种方法：

myClick("btn5", function () {
            var li = document.createElement("li");
            li.innerHTML = "广州";
			var city = document.getElementById("city");
			city.appendChild(li);
        });

操作内联样式

操作CSS
通过JS修改元素的样式：

元素.style.样式名 = 样式值;

例子：

<script> window.onload =function(){ var btn = document.getElementById("btn"); var box = document.getElementById("box"); btn.onclick = function(){ box.style.width = "300px"; } } </script>
    <style> #box{ height: 150px; width: 150px; background-color: red; } </style>
<body>
    <div id="box"></div>
    <br>
    <button id="btn">点击一下</button>
</body>

注意如果CSS的样式名中含有-，比如background-color，这种样式名是不合法的。去掉-改成大写。
backgroundColor

通过style属性设置的样式都是内联样式，内联样式具有较高的优先级。

但是如果在样式中，有!important，则样式会有最高的优先级，会使得JS失效。
所以尽量不要使用!improtant

获取元素的样式

上述JS中的修改和读取的都是内联样式，如果想读取样式表中的样式，就没有办法了。

语法：
	元素.currentStyle.样式名
	//可以读取当前显示的样式

但是这个方法只有IE支持

在其他浏览器的方法：
getComputedStyle()这个方法来获取当前的样式，这个是window方法，可以直接使用
需要两个参数：
1、要获取样式的元素；
2、可以传递一个伪元素，一般都传null；

例子

当scrollHeight - scrollTop == clinetHeight 时，说明滚动条到底了。

但是但是！！！在调试过程中发现，即使滚动条到底了，也无法触发行为，原因是：
调试得知chrome浏览器下scrollTop是小数，而clientHeight和scrollHeight始终是整数。所以在相减之后，结果始终是一个大于clinetHeight的小数。

解决方法：将等式改为不等式，并且左边-1：scrollHeight - scrollTop -1 < clinetHeight

例子：阅读用户须知，滚动条不到底，无法勾选：

<script> window.onload = function () { //滚动条到底的时候，表单才能用 var info = document.getElementById("info"); var inputs = document.getElementsByTagName("input"); info.onscroll = function () { //检查滚动条是否到底 if (info.scrollHeight - info.scrollTop - 1 < info.clientHeight) { inputs[0].disabled = false; inputs[1].disabled = false; } }; var btn = document.getElementById("btn"); btn.onclick = function(){ alert(info.scrollHeight - info.scrollTop); alert(info.clientHeight); }; }; </script>
<style> #info { width: 300px; height: 500px; background-color: #bfa; overflow: auto; } </style>

<body>
    <h3>欢迎用户注册</h3>
    <p id="info">
      ...
        我到底了~~</p>
    <button id="btn">测试</button>
    <input type="checkbox" name="" id="" disabled="disabled">我已仔细阅读，一定遵守协议
    <input type="submit" value="下一步" disabled="disabled">
</body>

在某个区域内，鼠标移动的坐标会被记录下来：

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

<script> window.onload = function () { var areaDiv = document.getElementById("areaDiv"); var showDiv = document.getElementById("showDiv"); areaDiv.onmousemove = function (event) { //在showDiv里面显示鼠标坐标 // alert(event); var x= event.clientX; var y= event.clientY; showDiv.innerHTML = "x="+x+","+"y="+y; } }; </script>
<style> #areaDiv { width: 350px; height: 150px; border: 1px solid black; } #showDiv { width: 350px; height: 50px; border: 1px solid black; } </style>

<body>
    <div id="areaDiv"></div>
    <br>
    <div id="showDiv"></div>
</body>

div跟随鼠标走动

<style> #box{ height: 150px; width: 150px; background-color: red; position:absolute; } </style>
<script> window.onload = function(){ var box = document.getElementById("box"); document.onmousemove = function(event){ var left = event.clientX; var top = event.clientY; var st = document.documentElement.scrollTop; var sl = document.documentElement.scrollLeft; box.style.left = left+sl+"px"; box.style.top = top+st+"px"; } } </script>
<body style="height: 1000px; width: 5000px;">
    <div id="box"></div>
</body>

JavaScript知识——DOM增删改、操作内联样式

DOM增删改

操作内联样式

获取元素的样式

例子

相关文章

热门标签

最新文章

目录