高程三 DOM对象

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <style>

        button{

            display: inline-block;

        }

    </style>

</head>

<body>

    <!-- 写在前面：文档节点是每个文档的根节点，<html>元素称之为文档元素，在这个网页中是文档节点的唯一子节点 -->

    <!-- 在html中文档元素始终都是<html>元素 而在XML中，任何元素都可能成为文档元素 -->

        <p>linbudu</p>

        <p class="para">insert the node</p>

        <button style="background-color:lightskyblue;" onclick="ale()">A Button</button>

    <script>

        var somenode = document.getElementsByTagName("p")[0];

        //返回HTMLCollection对象，这个对象有一个方法叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项

        var nodeList = somenode.childNodes;

        var textnode = nodeList[0];

        var textnode_1 = nodeList.item(1);//等于上面的获取方法

        // var arr = [1,2,3];

        console.log(nodeList);//NodeList,类数组，可通过方括号语法访问其值，同时有length属性，但其原型指向NodeList对象 不是Array的实例

        //同时，NodeList是有生命有呼吸的对象，会随着DOM结构的变化自动反映

        // console.log(arr);//原型指向Array

        console.log(textnode);//"linbudu"，获取到了文本节点

        console.log(textnode.parentNode,textnode.previousSibling,textnode.nextSibling);//等于somenode,null null 返回前一个与后一个兄弟节点

        console.log(somenode,somenode.firstChild,somenode.lastChild);// "linbudu"*2

        console.log(somenode.nodeType);//

        console.log(textnode.nodeType);//

        console.log(textnode.nodeName,textnode.nodeValue);// #text linbudu

        console.log(somenode.nodeName,somenode.nodeValue);// p null

        console.log(textnode.hasChildNodes());//false 比去获取childnode再获取长度更有效的判断有无子节点

        console.log(textnode.ownerDocument);//#document  所有节点都有这个属性 ，指向整个文档的文档节点

        // console.log(Node.ELEMENT_NODE);//1 元素节点

        // console.log(Node.ATTRIBUTE_NODE);//2

        // console.log(Node.TEXT_NODE);//3

        // console.log(Node.DOCUMENT_NODE);//9

        //Node类型中定义了12个数值常量 来表示不同的节点类型

        //

        //将NodeList对象转换为数组

        var transNL = Array.prototype.slice.call(nodeList,0);

        // call()方法复习，call(新作用域，参数)，0是传给Array.prototype.slice方法的

        console.log(transNL);

        //以上这些关系指针都是只读的，如果还要操作DOM节点，需要用到一些DOM方法

        var insert = document.querySelector(".para");

        console.log(insert);//实时变化的NodeList~

        var child = document.createElement("p");

        insert.appendChild(child);

        var child2 = document.createTextNode("before ");

        var childp = document.createElement("p");

        childp.appendChild(child2);//最好是这样

        insert.insertBefore(childp,insert.firstChild);

        // insert.replaceChild(newNode,oldNode);  会将被替换的节点从文档树中移除  变成一个孤儿文档

        // insert.removeChild(insert.lastChild);  也是变成孤儿

        // insert.removeChild(childp);

        var clone_deep = insert.cloneNode(true);

        var clone_shallow = insert.cloneNode(false);

        console.log(clone_deep.childNodes);//NodeList(3) 深复制  连带着子节点一起复制

        console.log(clone_shallow.childNodes);//NodeList(0) 浅复制 只复制这个节点

        //normalize()方法  处理空文本节点、并列的两个文本节点

        //document类型

        var html = document.documentElement;

        var body = document.body;

        console.log(html);//给力

        console.log(html.nodeType,html.nodeName,html.nodeValue,html.childNodes);//1 HTML null

        //!返回的NodeList是 head text body  这个text是nodeValue: "↵"，即换行

        console.log(body.childNodes);//text(回车) comment text(回车) comment

        document.title = "New Title";//可读可操作的一个属性

        var url = document.URL;//url

        var domain = document.domain;//域名

        var referer = document.referer;//来源页面的url

        console.log(url,domain,referer);

        //只有domain可以设置 但不可设置为url中不包含的域

        //document对象的特殊集合

        //docuemnt.anchors返回文档中所有带有name特性的<a>元素

        //.forms 文档中所有的form元素

        //.images

        //.links 文档中所有带href特性的a元素

        //Element类型

        //nodeName 与 tagName 两个属性会返回相同的值

        // 操作特性的三个DOM方法  详见DOM编程艺术

        function ale(){

            alert("siguoyi");

        }

        var btn = document.getElementsByTagName("button")[0];

        console.log(btn.getAttribute("style"));//background-color:lightskyblue;

        console.log(btn.style);//CSSStyleDeclaration (只是行内样式)返回一个对象 并没有映射到style特性

        console.log(btn.getAttribute("onclick"));//ale()

        console.log(btn.onclick);//ƒ onclick(event) {ale()}

        //所以通常不使用getA方法

        btn.setAttribute("background-color","white");//错误

        btn.setAttribute("style","background-color:white;");//正确

        //createA方法：

        var newAttr = document.createAttribute("alt");

        //Attr对象的value与nodeValue相等

        newAttr.value = "none";

        btn.setAttributeNode(newAttr);

        // 要将新特性添加到元素中必须使用该方法

        console.log(btn.attributes["alt"].value);//none

        console.log(btn.getAttributeNode("alt").value);//none

        //这两个返回对应特性的Attr结点

        console.log(btn.getAttribute("alt"));//none

        //只返回对应特性的值

        //Attr、Text、Comment、CDATASection、DF、DT等先忽略

    </script>

</body>

</html>

高程三 DOM对象的更多相关文章

Web自动化测试三 ----- DOM对象和元素查找
一.DOM对象 DOM(Document Object Model文档对象模型):将HTML的各种元素映射为JS可访问的对象.HTML文档中的所有内容都是节点,这些东西在HTML中我们称为元素. 整个 ...
WebKit JavaScript Binding添加新DOM对象的三种方式
一．基础知识首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...
前端之JavaScript：JS之DOM对象三
js之DOM对象三一.JS中for循环遍历测试 for循环遍历有两种第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
dom对象详解--document对象(三)
form对象 form对象代表一个HTML表单,在HTML文档中<form>每出现一次,form对象就会被创建.从dom对象层次图看,document.forms对象是当前文档所有for ...
javaScript操作DOM对象（看三遍，敲三遍，写三遍！不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
[jQuery]jQuery和DOM对象(三)
iQuery和DOM对象用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...
JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

随机推荐

[蓝桥杯]ALGO-116.算法训练_最大的算式
问题描述题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就是N-1个了,所以恰好每两个相邻数字之间都有一个符号 ...
18年春招某编程题：有三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等
题目描述: 给定三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等,操作有两种: 1.从X,Y,Z中选择两个数都加1. 2.从X,Y,Z中选择一个数加2. 求最少需要多少次操作. 题目思路: 1 ...
awk中使用shell的环境变量
awk中使用shell的环境变量一:"'$var'"这种写法大家无需改变用'括起awk程序的习惯,是老外常用的写法.如:var="test"awk 'BEGIN ...
STL进阶--成员函数 vs 算法
容器的成员函数 vs 算法容器中同名的函数 List: void remove(const T); template<class Comp> void remove_if(Comp); ...
P2837晚餐队列安排
传送特写此篇,纪念不用dp做dp题洛谷说这是个dp,但我不信(其实就是不会dp),因此我们考虑用另一种思路.修改后的队列每一个数a[i]一定满足a[i]<=a[i+1],那修改后的顺序就是 ...
PAT 乙级 1008 数组元素循环右移问题 (20) C++版
1008. 数组元素循环右移问题 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 一个数组A中存有N(N>0)个整数,在不允 ...
[转][C#][WebApi]
在 WebApi 中获取网页在服务器上的位置可以使用以下两种方式: string filePath = HostingEnvironment.MapPath(string.Format("/ ...
通过编写PHP代码并运用“正则表达式”来实现对试题文档进行去重复、排序
通过编写PHP代码并运用“正则表达式”来实现对试题文档进行去重复.排序 <?php $subject = file_get_contents('test.txt'); $pattern = '/ ...
python打包--pyinstaller打包报错
先来一段报错信息目前打包主要涉及socket模块出现的报错 missing module named resource - imported by posix, C:\Users\Administ ...
01-TCP/IP概述
TCP/IP 概述允许不同厂家的各种型号的计算机使用不同操作系统互相进行通信真正的开放系统 "全球互联网"或"因特网"的基础 2.分层网络协议通常分不同层 ...

高程三 DOM对象

高程三 DOM对象的更多相关文章

随机推荐

热门专题