JS(Dom操作)第十八课-阿里云开发者社区

JS(Dom操作)第十八课

1 文档对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
    </style>
    <!-- Dom文档对象的内容信息 -->
    <h1><a href="#" id="a1">我是链接的标签</a></h1><br>
    <form name="forml">
    </form><br>
    <input type="button" name="btn1" value="动态的内容信息" onclick="addinput()"><br>
    <input type="text" id="txt" value="123444"><br>
    <input type="button" name="btn1" value="修改信息" onclick="Uappinput()"><br>
    <!-- 鼠标为单机是变色 -->
    <script>
    </script>
</body>
</html>

       // 用户单机鼠标是颜色改变
        var domEl=document.querySelector("h1")
        document.linkColor="black"
        document.alinkColor="green"
        document.vlinkColor="yellow"
        // 获取地址
        document.write(document.URL)
        // 动态增加一个标签
    function addinput(){
        var tex=document.createElement("input");
        tex.type='text';
        tex.name="我是文本的内容";
        tex.value="动态的文本框"
        document.forml.appendChild(tex)
    }
    function Uappinput(){
        var  cc=document.getElementById("txt");
        cc.value="修改后的内容信息为"
    }
    // document.bgColor="yellow";
    document.fgColor="red";
    document.URL="index.html"

2 attribute的操作增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attribute的操作</title>
    <!-- 增加 修改 删除 判断  查询 -->
</head>
<body>
    <div class="box" id="main" name="wer" sex="男" age="67" data-srt="我较上周"></div>
    <script>
    </script>
</body>
</html>

         // 获取元素的值的属性值
        var classEl = document.querySelector('#main')
        // 控制台打印输出
        console.log(classEl)
        // 判断该属性是否age存在
        var flag = classEl.hasAttribute("age")
        console.log(flag)
        var flag1 = classEl.hasAttribute("name")
        console.log(flag1)
        // 获取某个值
        var name = classEl.getAttribute("name")
        console.log(name)
        var age = classEl.getAttribute("age")
        console.log(age)
        // 自己定义的属性 data-*
        var srt = classEl.getAttribute("srt")
        console.log(srt)
        // 设置元素的值
        var setName = classEl.setAttribute("setName", "我是设置的元素值")
        var getName = classEl.getAttribute("setName")
        console.log("获取姓名为"+getName)
        // 设置元素的值二
        var setWeight=classEl.setAttribute("setWeight","我的体重200kg")
        // 获取元素的值
        var getWeight=classEl.getAttribute("setWeight")
        console.log("获取体重的值"+getWeight)
        // 删除属性值元素
        var delteName = classEl.removeAttribute("setName")
        console.log(delteName)
        var attrs =classEl.attributes  //获取所有的属性
        console.log(attrs)
        for (var item of attrs) {
            console.log(item)
        }
        // 
        console.log(classEl.className)
        console.log(classEl.id)

3 classlist使用对类进行增删改查

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态的style样式的增删改查</title>
    <style>
        button{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .mystyle {
            width: 500px;
            height: 50px;
            padding: 15px;
            border: 1px solid black;
        }
        .anotherClass {
            border: 1px solid red;
            background-color: lightblue;
            color: white;
        }
        .thirdClass {
            text-transform: uppercase;
            text-align: center;
            font-size: 25px;
        }
        .newClassName{
            background-color: darkturquoise;
            color: red;
            height: 300px;
            width: 200px;
        }
    #id{
      overflow: hidden;
    }
    </style>
</head>
<body>
    <a onclick="insertinto()">点我我是一个增加class选择器的类名</a>
    <div id="myDIV">123 </div>
    <script>
    </script>
</body>
</html>

  function insertinto() {
            // 增加一个类名
            document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
            alert("增加几个类名")
            var all = document.querySelector("#myDIv")
            removes()
        }
        function removes() {
            document.getElementById("myDIV").classList.remove("mystyle");
            alert("删除的元素thirdClass")
            toggle()
        }
        function toggle(){
            document.getElementById("myDIV").classList.toggle("newClassName");
            // 调用函数
            contains()
        } 
        function contains(){
            var x = document.getElementById("myDIV").classList.contains("anotherClass");
            console.log(x)
            var y = document.getElementById("myDIV").classList.contains("mystyles");
            console.log(y)
        }

4 window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
</script>
</body>
</html>

        window.document.write("我是文档的对象内容")
        window.confirm("我是开始的内容信息")
        window,prompt("请输入我的个人信息为")
        window.alert("弹出内容信息")
        var bool=window.confirm("关闭窗口")
        // if(bool==true){
            // Window.close();
        // }
    </script>
    <script>
        function pop(){
            var message=document.getElementById("message");
            message,value=window.prompt(message.value,"返回信息的内容")
        }
    </script>
    <input type="text" id="message" size="40" value="请输入信息的内容">
<input type="button" value="显示对话信息" οnclick="pop()">
<!-- 打开窗口 -->
   var sd= window.open("window.html","new","height=200,width=800,top=100")
    var fgh=window.open("attribute的操作.html","new","height=400,width=800", "scrollbars","resizable","menubar")

5 自己定义的属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 自己定义的属性值 -->
    <div class='box' data-name="why"  data-age="23">我是属性值的内容信息</div>
    <script>
    </script>
</body>
</html>

  var boxEl=document.querySelector(".box")
        console.log(boxEl.age)
        console.log(boxEl.name)
        console.log(boxEl.dataset.name)
        console.log(boxEl.dataset.age)

6 创建元素的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 300px;
        height: 400px;
        margin: auto;
        border: 1px solid rgb(245, 6, 6);
    }
</style>
<body>
    <div class="box">我是元素的信息内容介筛</div>
    <script>
    </script>
</body>
</html>

         var doxClass = document.querySelector('.box')
        console.log(doxClass)
        var addH1 = document.createElement("h2")
        addH1.innerHTML = "我是标题元素信息内容"
        addH1.classList.add("div")
        doxClass.append(addH1)
        var addH2 = document.createElement("h1")
        addH2.innerHTML = "我是标题元素信息内容h1";
        addH2.classList.add("div")
        doxClass.append(addH2)  //在元素的前面
        doxClass.after(addH2)   //在元素的后面
        doxClass.before(addH2)  //在node元素的前面
        doxClass.replaceWith(addH1, "123") //替换元素

7 滚动的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">我是元素的信息内容介筛</div>
    <script>
    </script>
</body>
</html>

 //window的属性，大部分都是只读的，不支持设置，这里也就不一一分析。使用的时候window全部作为只读看待，不要设置。
//为了简便，除非特殊说明，此文档中的document.body代表元素（标签）
//一些需要兼容地方，也都有体现，没有过多解释。
/*获取常用对象：这里的每个对象都是一个完整的体系，都要掌握*/
var a=document.querySelector("div")
console.log(a)
/*获取大小、位置、滚动条*/
    //获取浏览器相对于屏幕的坐标
    var b=    window.screenLeft;/*window.screenX;*/
    console.log(b)
    var c=    window.screenTop;/*window.screenY;*/
    console.log(c)
    //获取窗口大小：对应三大家族记忆
        //offset：获取元素的总大小---获取元素相对于位置
        var d=    document.body.offsetHeight
        var e=    document.body.offsetWidth
        var f=    document.body.offsetTop
        var g=    document.body.offsetLeft
        var h=    document.body.offsetParent
        console.log(d+"_"+e+"_"+f+"_"+g+"_"+h)
        //获取窗口的外部高度（包含工具条与滚动条）
        var i=    window.outerHeight
        var j=    window.outerWidth
        //scroll：获取元素内容的实际大小----获取元素的滚动距离
        var k=    document.body.scrollHeight
        var l=    document.body.scrollHeight
        //获取窗口的文档显示区的大小----获取窗口的滚动距离（内部高度）
        var o=    window.innerHeight
        var p=    window.innerWidth
        var q=    window.pageXOffset;/*IE*/ 
        var x=    window.pageYOffset
            //IE下使用html的滚动距离代替window的滚动
        var aa=    document.documentElement.scrollTop
            document.documentElement.scrollLeft
/*测试*/
setInterval(function(){
    document.write("我是元素<br>")
},5000)

8 理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .week{
      background-color: rgb(0, 164, 230);
    }
    .date{
      width: 100px;
      height: 100px;
      border: 1px solid rgb(128, 0, 255);
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box" id="frist" data-age="123" data-abc="dsad">
    我是元素的内容信息
  </div>
  <p class="date" style="background-color: rgb(247, 255, 180);">
    newClassName
  </p>
  <span>
    东东
  </span>
  <button>按钮</button>
  <script>
    var divEl = document.querySelector("div")
    var pEl = document.querySelector("p")
    // 通过style修改样式
    divEl.style.backgroundColor = "red" 
    pEl.className = "week" // 覆盖所有类名
    pEl.classList.add("week") // 添加类名 不会覆盖类名
    // setTimeout 延迟执行的时间 1000 秒后 删除的 内容是
    setTimeout(function(){ // 延迟执行
      pEl.classList.remove("week") //删除一个类名
      console.log(12);
    },1000)
    // 获得这个元素的按钮 为 button
    var btn = document.querySelector("button")
    // 通过button的点击事件来执行
    btn.onclick=function(){
      pEl.classList.toggle("week")  // 类名存在就移除，类名不存在就添加
      var flag = pEl.classList.contains("week") //  判断某个类名是否存在
      console.log(flag ? "存在":"不存在");
    }
    pEl.style.width = "200px"
    pEl.style.backgroundColor = "yellows"
    pEl.style.cssText = `height:200px;
      background-color: gray;
      width:200px;`
    // 设置多行的样式属性，覆盖原本的内联style
    pEl.style.display = "" // 使用默认值
    console.log(pEl.style.width); // 只能获取内联style属性
    console.log(getComputedStyle(pEl).width); // 元素的任意属性
    console.log(divEl.getAttribute("class"));
    divEl.setAttribute("class",false)
    console.log(divEl.className); // 通过property获取class的值
    // console.log(divEl.id); // 通过property获取id的值
    // console.log(divEl.age); // 通过property获取非标准的attributes的值
    // console.log(divEl.abc); // 通过property获取非标准的attributes的值
    // divEl.className = "boxName" // 通过property方式修改attributes的值
    // console.log(divEl.dataset.age); // data-*方式
    // console.log(divEl.dataset.abc); // data-*方式
    // divEl.setAttribute("class","atrrBox")
    // console.log(divEl.getAttribute("class"));
  </script>
</body>
</html>

JS(Dom操作)第十八课

JS(Dom操作)第十八课

1 文档对象

2 attribute的操作增删改查

3 classlist使用对类进行增删改查

4 window对象

5 自己定义的属性操作

6 创建元素的信息

7 滚动的案例

8 理解

热门文章

最新文章

相关课程

相关电子书

相关实验场景

JS(Dom操作)第十八课

JS(Dom操作)第十八课

1 文档对象

2 attribute的操作增删改查

3 classlist使用 对类进行增删改查

4 window对象

5 自己定义的属性操作

6 创建元素的信息

7 滚动的案例

8 理解

热门文章

最新文章

相关课程

相关电子书

相关实验场景

3 classlist使用对类进行增删改查