Javascripts之DOM和节点获取：

最新推荐文章于 2024-08-10 16:15:00 发布

七月2333

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量187

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_58877067/article/details/121132768

版权

DOM：document object model: 文档对象模型

节点的类型：元素节点 <div> </div>

属性节点 id\class ...

文本节点 div文本

window.onload:代码在整个业面后面执行；

node.getElementByTagName（""）;

伪数组：使用起来和数组类似

node.getElementByClassname（""）;

通过class名字获取符合条件的元素节点；

node.getElementByName（""）;

通过name属性获取元素节点（一般用在表单元素里）

document.querySelector()符合条件的第一个元素

document.querySelectorAll() 返回值是一个伪数组；

  var h=document.querySelector("#ol");
           h.style.backgroundColor="green";

获取有效样式：

(node.currentStyle[...])

(getComputedStyle(node)[...] ）

比如：alert(getComputedStyle(ol)['backgroundColor']);

兼容：

  function getstyle(node,cssstyle){
            return node.currentStyle?node.currentStyle[cssstyle]:getComputedStyle(node)[cssstyle];
        }

获取当前内联样式：

.style.***只能获取内联的css样式：

          window.οnlοad=function(){
        var odiv=document.getElementById("div1");
       alert(odiv.style.width);
        alert(odiv.style.backgroundColor);
             
<body>
    <div id='div1' class='box' style="width: 200px;background-color:brown"></div>
</body>

alert(getComputedStyle(odiv)['height']);获取当前的样式；

alert(odiv.currentstyle['height']); IE浏览器；

每一秒对文本的颜色以及大小进行修改：

<style>
    #box{width: 300px; height: 200px;  border: 1px solid black; margin: 100px auto; 
text-align: center; line-height: 200px; font-size: 25px;}
</style>
<script>
          var speed=5;
           var count=0;
    function random(){
        var str="rgba("+parseInt(Math.random()*256)+','+parseInt( Math.random()*256)+","+parseInt( Math.random()*256)+",1)";
        return str;
    }
    window.οnlοad=function(){
       var obox=document.getElementById("box");
       setInterval(function(){
           obox.style.color=random();
         
           var currentsty=parseInt(getComputedStyle(obox)['font-size']) ;
           obox.style.fontSize=currentsty+speed+'px';
           count++;
           if(count%10==0){
            speed=speed*(-1);
           }

       },100);
    }
    
</script>
<body>
    <div id="box">文本</div>
</body>
</html>

getAtrribute:支持自定义属性；

  alert(odiv1.getAttribute('title'));

setAtrribute:设置属性的名字

eremoveAtrribute:删除属性,而node.属性=" ",无法删除该属性；

odiv1.outerHTML="<h2>hello</h1>" ; odiv1.innerHTML="<h2>hello</h1>"都会将原来的内容替换掉

node.innerText:获得的是标签的纯文本；

node.innerHTML:获得的是标签内的所有内容；

七月2333

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Javascripts之DOM和节点获取：

DOM：document object model: 文档对象模型节点的类型：元素节点 <div> </div>属性节点 id\class ...文本节点 div文本window.onload:代码在整个业面后面执行；node.getElementByTagName（""）;伪数组：使用起来和数组类似node.getElementByClassname（""）;通过class名字获取符合条件的元素节点；node.getElementByName..
复制链接

扫一扫