JavaScript DOM 编程艺术（第二版）--读书笔记

最新推荐文章于 2020-12-21 23:19:36 发布

莫修

最新推荐文章于 2020-12-21 23:19:36 发布

阅读量610

点赞数 1

分类专栏： javaScript HTML5 文章标签： javascript dom 读书笔记

本文链接：https://blog.csdn.net/luojiandecsdn/article/details/50790874

版权

javaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

DOM的属性：childNodes、nodeType、nodeValue、nodeName、firstChild、lastChild

1、childNodes
element.childNodes 获取任何一个元素的所有子元素，它是包含这个元素全部子元素的数组
文档里的几乎每样东西都是一个节点，甚至连空格、换行符和注释都会被解释为一个节点，而他们都包含在childNodes属性所返回的数组中
实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); alert("第一个div的子节点数为:"+div1.childNodes.length+"\n"+ "第二个div的子节点数为:"+div2.childNodes.length); } </script> </head> <body> <div id="div1">注释也是一个节点</div> <div id="div2">换行符也是一个节点 </div> </body> </html>
结果：
这里写图片描述

2、nodeType
node.nodeType 获取节点的类型
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
注释节点的nodeTtpe属性值是8
文档节点的nodeType属性值是9
实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
window.onload=function(){
var div=document.getElementById("demo");
var divType=div.nodeType;
var textType=div.firstChild.nodeType;
var documentType=document.nodeType;
alert(
"<div>标签的节点类型是："+divType+"\n"+
"<div>标签内部文本的节点类型是："+textType+"\n"+
"文档节点的节点类型是："+documentType
)
        }
    </script>
</head>
<body>
    <div id="demo">节点类型</div>
</body>
</html>

这里写图片描述

3.nodeValue
node.nodeValue 获取一个文本节点的值
实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
window.onload=function(){
var div=document.getElementById("demo");
alert("文本节点的值为:"+div.firstChild.nodeValue);
}
    </script>
</head>
<body>
    <div id="demo">这是一个示例</div>
</body>
</html>

这里写图片描述

4、nodeName
node.nodeName
如果节点是一个元素节点 , nodeName 属性将返回大写的标签名。
如果节点是一个属性节点， nodeName 属性将返回属性名。
其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。

5、fistChild
node.firstChild 获得第一个子元素

6、lastChild
node.lastChild 获得最后一个子元素

最佳实践

1、平稳退化(graceful degradation)：确保网页在没有JavaScript的情况下也能正常运行。JavaScript使用window对象的open()方法来创建新的浏览器窗口。window.open(url,name,features)

url是想在新窗口打开的网页的URL地址，如果神略这个参数，将弹出一个空白的浏览器窗口
name是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信
features是一逗号为分隔符的字符串，其内容是新窗口的各种属性（包括新窗口的尺寸，被启用或禁用的各种浏览功能(工具条、菜单条等等)）。
实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
window.open("http://www.baidu.com","example_name","width=320,height=180")
    </script>
</head>
<body>
</body>
</html>

这里写图片描述

搜索机器人(searchbot)是一种自动化程序，他们浏览web的目的是为了把各种网页添加到搜索引擎的数据库里，但却只有极少数搜索机器人能理解JavaScript代码，故网页不能平稳退化，它们在搜索引擎上的排名就会大受损害

2、分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开

3、向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死掉对象检测：if( ! document.getElementsByTagName || ! document.getElementById) reture false ;
浏览器嗅探技术：通过提取浏览器供应商提供的信息来解决向后兼容问题

4、性能考虑：确定脚本执行的性能最优
尽量减少访问DOM和减少标记
合并放置脚本
压缩脚本

5、抽象(abstraction)：把一个非常具体的东西改进为一个通用的东西的过程叫做抽象。如函数抽象

1、innerHTML
实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
window.onload=function(){
var testdiv = document.getElementsByTagName("div")[0];
alert(testdiv.innerHTML)
        }
    </script>
</head>
<body>
  <div>
      <p title="demo">this is <em>my</em> content.</p>
  </div>
</body>
</html>

这里写图片描述
2、createElement

document.createElement(nodename)
所创建出来的元素节点不是任何一颗DOM节点树的组成部分。它只是游荡在JavaScript世界里的一个孤儿，称为文档碎片(document fragment)

3、appendChild

parent.appendChild(child)
可以将document.createElement(“nodename”)所创造出来的节点添加到parent节点中作为其一个子节点

4、creatTextNode

document.creatTextNode(text)创建文本节点

5、insertBefor()

parentELement.insertBefore( newELement , targetment )
newELement ：你想插入的新元素
targetment ：你要把新元素插入到那个元素( targeELement)之前
parentELement：目标元素的父元素

6、insertAfter() DOM并没有提供，但我们可以编写一个

function insertAfter(newElement,targetELement){
    var parent=targetELement.parentNode;
    if(targetELement==parent[parent.length-1]){
        parent.appendChild(newElement);
    }
    else{
        parent.insertBefore(newElement,targetELement.nextSibling);
    }
}

parentELement.insertAfter( newELement , targetment )
newELement ：你想插入的新元素
targetment ：你要把新元素插入到那个元素( targeELement)之后
parentELement：目标元素的父元素

7、nextSibling

element.nextSibling 目标元素的下一个兄弟元素

莫修

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 编程艺术（第二版）--读书笔记

DOM的属性：childNodes、nodeType、nodeValue、nodeName、firstChild、lastChild1、childNodes element.childNodes 获取任何一个元素的所有子元素，它是包含这个元素全部子元素的数组文档里的几乎每样东西都是一个节点，甚至连空格、换行符和注释都会被解释为一个节点，而他们都包含在childNodes属性所返回的数组中
复制链接

扫一扫