DOM 操作HTML、CSS、EventListener

DOM操作html###

1.改变html输出流:
注意:绝对不要再文档加载完成之后使用document.write()。这会覆盖该文档

eg:(会覆盖原文档)
<body>
    <p>Hello</p>
    <button onclick=“demo”>按钮</button>
    <script>
        function demo(){
            document.write(“World”);
        }
    </script>
</body>

2.寻找元素:
通过id找到html元素
通过标签名找到html元素
3.改变html内容:
使用属性:innerHTML

eg:
<body>
    <p id=“pid”>Hello</p>
    <button onclick=“demo()”>按钮</button>
    <script>
        function demo(){
            //通过id找到html元素
            var nv = document.getElementById(“pid”).innerHtML=“WS”;
            /*
                相同元素中的第一个元素
                document.getElementByTagName("p");
            */
        }
    </script>
</body>

4.改变HTML属性:
使用属性attribute:

<body>
        <a href="www.baidu.com" id="aid">网址</a>
        <button onclick="demo()">按钮</button>
        <script>
            function demo(){
                document.getElementById("aid").href = "www.google.com";
            }
        </script>
    </body>
DOM操作HTML元素详解######
    1.HTML DOM:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
    DOM 操作html:JS改变html元素、html属性、css样式、对页面中所有事件作出反应
            a.改变HTML输出流:
                注意:不要再文档加载完成之后使用document.write()。这会覆盖该文档
            b.寻找元素:
                通过ID 找到HTML元素         document.getElementById()
                通过标签名找到HTML元素       document.getElementsByTagName("p")      寻找相同元素中的第一个
            c.改变html内容:
                使用属性:innerHTML         document.getElementById().innerHTML= "";
            d.改变HTML属性:
                使用属性:attribute
                    <body>
                        <img id="imgid" src="1.png">
                        <script>
                            document.getElementById(“imgid”).src="8.png";
                        </script>
                    </body>
        方法:
            getElementsByName()         获取name          通过 元素的name标签
            getElementsByTagName()      获取元素           通过元素名 P
            getAttribute()              获取元素属性      getAttribute("属性名")
            setAttribute()              设置元素属性      setAttribute("属性名","属性值")
            childNodes()                访问子节点
            parentNode()                访问父节点
            createElement()             创建元素节点
            createTextNode              创建文本节点
            insertBefore()              插入节点
            removeChild()               删除节点
            offsetHeight                网页尺寸
            scrollHeight                网页尺寸
        <script>
        function getChildNode(){
            var childnode = document.getElementByTagName("ul")[0].childNodes;
            alert(childnode.length);
            alert(childnode[0].nodeType)
        }
        function getParentNode(){
            var div = document.getElementById("pid"); 
           alert(div.parentNode.nodeName);
        }
        get ParentNode();

        //创建元素节点
        function createNode(){
            var body = document.body;
            var input = document.createElement("input");
            input.type = "button";
            input.value = "按钮";
            body.appendChild(input);//在末尾插入
        }
        createNode();
        
        //insertBefore
        function addNode(){
            var div = document.getElementById("div");
            var node = document.getElementById("pid");
            var newNode = document.createElement("p");
            newNode.innerHTML = "动态添加第一个p元素";
            div.insertBefore(newNode,node);//insertBefore(插入的节点,相对位置)
        }

        //removeChild
        function removeNode(){
            var div = document.getElementById("div");
            var p = div.removeChild(div.childNodes[1]);
        }

        //offsetHeight
        function getSize(){
            var width = document.body.offsetWidth||document.documentElement.offsetWidth;
            var height = document.body.offsetHeight;
        }
        </script>

DOM操作css###

1.通过DOM对象改变CSS
    语法:document.getElementBuId(id).style.property=new style;
    <head>
        <style>
            .div{
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div class = "div" id="div">
            hello
        </div>
        <button onclick="demo()">按钮</button>
        <script>
            function demo(){
                document.getElementById("div").style.background = "blue";
                document.getElementById("div").style.color = "blue";

            }
        </script>
    </body>

DOM 操作EventListener###

语法:document.getElementById(id).style.property=new style
Dom EventListener:
1.addEventListener(): 向指定元素添加事件句柄
2.removeEventListener(): 移除添加的事件句柄

                <button id="btn">按钮</button>
                <script>
                    var x = document.getElementById("btn");
                    x.addEventListener("click",hello);
                    x.addEventListener("click"world);
                    x.removeEventListener("click",hello);
                    x.removeEventListener("click",world);
                    function hello(){
                        alert("Hello");
                    } 
                   function world(){
                        alert("world");
                    }
                </script>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,119评论 1 91
  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 3,428评论 2 62
  • DOM简介 当网页加载时,浏览器会创建页面的文档对象模型(DOM)。通过DOM,JS可以对HTML实现以下操作:改...
    figure_ai阅读 302评论 0 1
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 2,284评论 1 10
  • 1)我真心的感谢今天在店里学了很多东西 感谢你,感谢你,感谢你 2)我真心的感谢今天店对面开了一家新咖啡店,请了我...
    张艾婷阅读 33评论 0 0