JS基本概念笔试题 DOM知识

w3cschool

<!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>
    <!-- 所有的内容都写在身体body里。这边是输出的部分。所有的都在html这边输出。  js部分不显示。那这个是怎么来的？是结构中输出的。 怎么来的？ -->
    <p id="demo">我是p标签</p>
    <p id="intro">通过id查找HTMl元素</p>
    <script>
        /** 这个DOM是什么？不懂啊，那就去看概念弄明白。认识字能学。文本对象类型document object module
         * javascript中html DOM方法。HTML DOM方法是你能够在html元素上执行的动作。
        html DOM属性是您能够设置或改变的HTML元素的值。
        DOM编程界面：HTML DOM能够通过JavaScript进行访问（也可以通过其他编程）
        在DOM中，所有HTML元素都被定义为对象。
        编程界面是每个对象的属性和方法。
        属性是你能够获取或设置的值（比如改变HTML元素的内容）
        方法是你能够完成的动作。
        getElementById("demo").innerHTML="Hello World!"
        解释：getElementById这是方法，innerHTML 这是属性
        getElementById方法 访问HTML元素最常用的方法是使用获取元素的id
        innerHTML属性的解释?获取元素内容最简单的方法是使用innerHTML
        属性，innerHTML属性可用于获取或替换HTML元素的内容。
        innerHTML属性可用于获取或改变任何HTML元素，包括<html>和<body>*/ 
        document.getElementById("demo").innerHTML="Hello World!";
        
        // 获取到intro的值，把它赋值给一个变量
        var myElement=document.getElementById("intro");
        // innerHTML就是获取这个标签里面的值，后面等号的话就是给它赋值。
        document.getElementById("demo").innerHTML="来自intro段落的文本是："+myElement.innerHTML;
        // 最简单的也要写，培养熟悉感。按照客观规律生活。基本概念。朝着优秀的人学习。
        // HTML DOM 文档对象是你的网页中所有其他对象的拥有者。文档对象代表你的网页。如果你总是访问document对象开始，下面是一些如何使用document对象来访问和操作HTML的实例。基本概念要掌握，夯实基本功。实战发现问题。
        /** 查找HTML元素：document。getElementById(id)通过元素id来查找元素。   
         * document.getElementByTagName(name)通过标签名查找元素。
         * document.getElementByClassName(name)通过类名来查找元素。
         * 改变HTML元素：方法：element.innerHTML=new html content。inner描述：改变元素的inner HTML
         * element.attribute=new value  描述：改变HTML元素的属性值。
         * element.setAttribute(attribute,value) 改变HTML元素的属性值
         * element.style.property=new style 改变HTML元素的样式
         *     添加和删除元素
         * document.createElement(element) 创建HTML元素
         * document.removeChild(element) 删除HTML元素
         * document.appendChild(element) 添加HTML元素
         * document.replaceChild(element) 替换HTML元素
         * document.write(text) 写入HTML输出流
         *     添加事件处理程序
         * 方法：document.getElementById(id).onclick=function(){code}   描述：向onclick事件添加事件处理程序。
         *      查找HTML对象
         * document.anchors 返回拥有name属性的所有<a>元素
         * document.applets 返回所有applets元素
         * document.baseURI 返回文档的绝对基准URI
         * document.body 返回body元素
         * document.cookie 返回文档的cookie
         * document.doctype 返回文档的doctype
         * document.documentMode 返回浏览器使用的模式
         * document.documentURI 返回文档的URI
         * document.domain 返回文档服务器的域名
         * document.domConfig   废弃。返回DOM配置
         * document.embeds 返回所有<embed>元素
         * document.forms返回所有的form元素
         * document.head 返回所有的<head>元素
         * document.images 返回所有<img>元素
         * document.implementation 返回DOM实现
         * document.inputEncoding 返回文档的编码（字符集）
         * document.lastModified 返回文档更新的日期和时间
         * document.links 返回拥有href属性的所有<area>和<a>元素
         * document.readyState 返回文档的加载状态
         * document.referrer 返回引用的URI(链接文档) 
         * document.scripts 返回所有script元素
         * document.strictErrorChecking 返回是否强制执行错误检查
         * document.title 返回<title>元素
         * document.URI 返回文档的完整URL
         
        */ 
    </script>
</body>
</html>