JS--DOM操作（1）

2018-03-06 本文已影响0人春铃邃晓

文档对象模型DOM（Document Object Model）为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的就是为了能让JS操作HTML元素而制定的一个规范。

处理网页内容的方法和接口

浏览器对象模型BOM，有很大兼容性问题。

与浏览器交互的方法和接口

DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点数）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点：
1.元素节点：<HTML>、<body>、<p>等，即标签
2.文本节点：<li>...</li>中的JavaScript、DOM、CSS等向用户展示的内容/文本
3.属性节点：<a>标签的链接属性href="http://www.baidu.com"等元素属性

<a href="http://www.baidu.com">JavaScript DOM</a>

元素节点：a
属性节点：href="http://www.baidu.com"
文本节点：JavaScript DOM

通过ID获取元素document.getElementById("id")
（获取的元素是一个对象，如想对元素进行操作，要通过它的属性或方法）
结果：null 或 [object HTML ParagraphElement]
innerHTML属性Object.innerHTML
（Object是获取的元素对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="con">Hello World!</p>
    <script>
        var mycon= document.getElementById("con");
        console.log("p标签原始内容:"+mycon.innerHTML);
        //输入元素内容
        mycon.innerHTML= "123";
        console.log("p标签修改后内容:"+mycon.innerHTML);
    </script>
</body>
</html>

结果：123

改变HTML样式
Object.style.property=new style;
（Object是获取的元素对象）
基本属性表：

backgroundColor（设置元素的背景颜色）
height         （设置元素的高度）
weight         （设置元素的宽度）
color          （设置元素的颜色）
font           （在一行设置所有的字体属性）
font family    （设置元素的字体系列）
font size      （设置元素的大小）
等

显示和隐藏（display属性
Object.style.display=value
value取值：

none           （此元素不会被显示（即隐藏））
block           （此元素显示为块级元素（即显示））

控制类属性（className属性）
设置或返回元素的class属性（有兼容问题ie6,7,8不兼容）

object.className= classname

作用：
1.获取元素的class属性
2.为网页内的某个元素制定一个css样式来更改该元素的外观

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one {
            width: 200px;
            background-color: #8A25C6;
        }
        .two {
            background-color: #C81623;
        }
    </style>
</head>
<body>
    <p id="con" class="one">Hello World!</p>
    <button onclick="changeCon()">点击</button>
    <script>
        var mycon= document.getElementById("con");

        function changeCon(){
            mycon.className="two";
        }
    </script>
</body>
</html>

结果：

image.png

封装自己的类（解决className不兼容问题）

笔试可能会考

原理：要取出所有的盒子，利用遍历的方法，通过每一个盒子的className来判断。如果相等就留下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #008000;
            margin-bottom: 10px;
        }
    </style>
    <script>
        window.onload = function(){
            //封装自己class类名
            function getClass(classname){
                //如果浏览器支持，则直接返回
                if(document.getElementsByClassName){
                    return document.getElementsByClassName(classname);
                }
                //不支持的浏览器
                var arr = []; //用于存放满足的数组
                var dom = document.getElementsByTagName("*");
                for(var i= 0,len= dom.length;i<len;i++){
                    if(dom[i].className == classname){
                        arr.push(dom[i]);
                    }
                }
                return arr;
            }
        console.log(getClass("a").length);
        }
    </script>
</head>
<body>
<div></div>
<div class="a"></div>
<div></div>
<div class="a"></div>
<div></div>
<div></div>
<div class="a"></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

结果：3

JS--DOM操作（1）

猜你喜欢

热点阅读