文档章节

JavaScript Dom对象

Ethan-GOGO
 Ethan-GOGO
发布于 2016/03/17 14:12
字数 424
阅读 49
收藏 4

1.Dom简介

dom指的是document。整个doc下还有head,body,而head,body下面又有link p a等


2.Dom操作HTML

//1.xxxx将会覆盖Hello
<body>
    <p>Hello</p>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.write("xxxx");
        }
    </script>

</body>

//2.寻找元素和改内容
<body>
    <p id="pid">Hello</p>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.getElementById("pid").innerHTML = @"hah";
        }
    </script>
</body>

//3.更改html属性
<body>
    <a id="aid" href="http://www.baidu.com">baidu</a>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.getElementById("aid").href = "http://www.hao123.com";
        }
    </script>
</body>


3.Dom操作CSS

与操作HTML类似。在script更快css样式


4.Dom事件监听

<body>
    <button id="btn">按钮</button>
    <script>
        //句柄操作
        var x = document.getElementById("btn");
        x.addEventListener("click",hello);
        x.addEventListener("click",world);

        function hello(){
            alert("hello");
        }
        function world(){
            alert("world");
        }
    </script>
</body>


5.Dom对象控制HTML

<body>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<a id="aid" title="得到了a标签属性">AAA</a>
<a id="aid2">BBB</a>
<ul>
    <li id="l">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="div" style="background-color: aqua">
    <p id="pid">xxxxxx</p>
</div>
<script>
    //获取name
    function getName(){
        var count = document.getElementsByName("pn")
        var p = count[2];
        p.innerHTML = "world"
    }
    getName();

    //获取元素属性
    function getArr(){
        var anode = document.getElementById("aid").getAttribute("id");
        alert(anode)
    }
    //getArr();

    //设置元素属性
    function setAttr(){
        var andoe = document.getElementById("aid2");
        andoe.setAttribute("title","动态设置attr");
        alert(andoe.getAttribute("title"));
    }
    //setAttr();

    //访问子节点
    function getChildNode(){
        var childNode = document.getElementsByTagName("ul")[0].childNodes;
        alert(childNode.length);
    }
    //getChildNode();

    //访问父节点
    function getParentNode(){
        var div = document.getElementById("l");
        alert(div.parentNode.nodeName);
    }
    //getParentNode();

    //创建节点
    function createNode(){
        var body = document.body;
        var input = document.createElement("input");
        input.type = "button";
        input.value = "按钮"
        body.appendChild(input)
    }
    //createNode();

    //插入节点
    function insetNode(){
        var div = document.getElementById("div");
        var oldP = document.getElementById("pid");
        var newnode = document.createElement("p");
        newnode.innerHTML = "insert";
        div.insertBefore(newnode,oldP);
    }
    insetNode();

    //删除节点
    function removeNode(){
        var div = document.getElementById("div");
        div.removeChild(div.childNodes[1]);//1开始算起 不是0
    }
    removeNode();

    //获取页面size
    function getSize(){
        var height = document.documentElement.offsetHeight;
        var width = document.documentElement.offsetWidth;
        alert(height+","+width);
    }
    getSize();
</script>
</body>


© 著作权归作者所有

Ethan-GOGO
粉丝 14
博文 174
码字总数 82033
作品 0
广州
私信 提问
加载中

评论(1)

p
poet_res
谢谢分享,初学者福音
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0
DOM对象和js对象以及jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别 一、DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修...

奋斗的雲
2018/09/17
50
0
谈谈浏览器里的JavaScript

在许多的网页前端教学或是文章书籍当中,你可能常常听到这样的说法:「HTML、CSS 与JavaScript 是网页前端三大要素」,其中: HTML 负责资料与结构 CSS 负责样式与呈现 JavaScript 负责行为与...

米淇淋
2019/05/21
0
0
React学习(2)-深入浅出JSX

前言 在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起 然而在React出现后,一切皆js,对于在JS里面写HTML代码,刚开始是非...

itclanCoder
2019/07/03
0
0
JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd
2018/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android 快速开发框架 ZBLibrary

MVP 架构的 Android 快速开发框架, 提供一套开发标准( View,Data,Event )以及模板和工具类并规范代码。 封装层级少,简单高效兼容性好。 OKHttp、UIL 图片加载、ZXing 二维码、沉浸状态栏...

boonya
4分钟前
0
0
printf的格式很长的论点是什么?

printf函数采用参数类型,例如%d或%i用于signed int 。 但是,我没有看到任何long价值的东西。 #1楼 如果您打算像我一样打印unsigned long long ,请使用: unsigned long long n;printf("...

技术盛宴
11分钟前
13
0
为BlueLake主题增加图片放大效果

fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大、相册浏览、视频弹出层播放等效果。优点有使用简单,支持高度自定义,兼顾触屏、响应式移动端特性,总之使用体验相当好...

CREATE_17
11分钟前
13
0
如何将现有的Git存储库导入另一个?

我在名为XXX的文件夹中有一个Git存储库,还有第二个名为YYY的 Git存储库。 我想将XXX存储库作为名为ZZZ的子目录导入YYY存储库,并将所有XXX的更改历史记录添加到YYY 。 之前的文件夹结构: ...

javail
26分钟前
6
0
JSP-Servlet入门2之JSP运行原理(一)

JSP全名为Java Server Pages,中文名叫java服务器页面,是一种动态页面技术 。实际上JSP是指在HTML中嵌入java脚本语言, 一、 JSP起源 在很多动态网页中,绝大部分内容都是固定不变的,只有局...

橘子_
53分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部