节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基础属性
（1）元素节点---nodeType为1
（2）属性节点---nodeName为2
（3）文本节点---nodeValue为3 （文本节点包含文字、空格、换行等）
2、节点的层级
DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点
（1）根节点：<html>就是根节点，有且只有一个
（2）父节点：一个节点的上级节点
（3）子节点：一个节点的下级节点
（4）兄弟节点：具有相同父节点的节点
二、节点 *** 作
1、获取父节点
elementparentNode
2、获取子节点
（1）elementchildNodes：获得的是当前元素的所有子节点的集合（所有类型的子节点）
（2）elementchildren：是一个可读的属性，返回所有子元素节点
（3）firstChild：获取第一个子节点
（4）lastChild：获取最后一个子节点
（5）firstElementChild：获取第一个元素子节点
（6）lastElementChild：获取最后一个子元素节点
3、获取兄弟节点
（1）nextSibling：获取下一个兄弟节点
（2）previousSibling：获取上一个兄弟节点
（3）nextElementSibling：获取下一个兄弟元素(标签)节点
（4）previousElementSibling：获取前一个兄弟元素节点
<body>
<div class="demo">
<div class="box">
<h2>一二三四五</h2>
<span class="child">上山打老虎</span>
<p>注意！（保护国家保护动物）</p>
</div>
</div>
<div>
<ul>
<li id="l1">红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
</ul>
</div>
<script>
var child = documentquerySelector('child')
consolelog(childparentNode);
var ul = documentquerySelector('ul');
var lis = ulquerySelectorAll('li');
consolelog(lis);
consolelog("通过childNodes获得的子节点",ulchildNodes);
consolelog("children",ulchildren);
consolelog("ul的子节点",ulchildNodes);
consolelog("ul第一个子节点的类型：",ulchildNodes[0]nodeType);
consolelog("ul的第二个字节点类型：",ulchildNodes[1]nodeType);//1是元素，也叫标签
consolelog("ul的第一个子节点",ulfirstChild);
consolelog("ul的最后一个子节点：",ullastChild);
consolelog("ul的第一个子元素节点",ulfirstElementChild)
consolelog("ul的最后一个子元素节点",ullastElementChild)
var span = documentquerySelector('child');
consolelog("span的兄弟节点",spannextSiblingnextSibling)
consolelog("span的前一个兄弟节点",spanpreviousElementSibling)
</script>
</body>
登录后复制

4、创建节点
（1）doumentwrite():若页面加载完毕,再次调用该方法导致页面重绘
（2）elementinnerHTML：将节点加入到元素中,导致页面部分重绘
（3）documentcreateElement()：创建节点结构清晰、效率不高
5、添加和删除节点
（1）appendChild()：将节点添加到指定父节点的已有子节点的末尾
（2）insertBefore()：将节点添加到指定父节点的已有子节点的前面
（3）removeChild(child)：删除一个指定的节点。返回值为删除的节点
6、克隆节点
cloneNode(true/false)：复制节点
（1）true：深拷贝,复制节点本身和所有子节点
（2）false(或空)：浅拷贝,只复制节点本身
D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性： d3select 和 d3selectAll 。
这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 divitem ， #my-chart 或 g:first-child ）。
[//]: classed 是一个 boolean
除了将常量值传递给 style , attr , classed , property ,之外 text ， html 您还可以传入一个函数。例如：
该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。
此方法有两个参数：第一个是指定事件类型的字符串;第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。
最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：
在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下 *** 作：
[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3select(this)
append 可以使用 D3和 insert 方法将元素添加到选择的元素中。可以使用 删除元素 remove 。
append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。
insert 类似于 append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。
remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：
大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 style 可以 attr 链接 on 起来。例如：
该 each 方法允许您为 选择的每个元素 调用一个函数。
回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。
这是一个示例， each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：
该 call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。
call 在您想要对选择进行 *** 作的可重用函数时很有用。
例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：
您可以使用 D3 的 filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。
在此示例中，您过滤偶数元素并将它们着色为橙色：
通过调用 sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。
请参照 css3 伪类选择器；
:first-child
选择某个元素的第一个子元素（IE6不支持）
:last-child
选择某个元素的最后一个子元素
:first-of-type
[CSS3]选择一个上级元素下的第一个同类子元素
:last-of-type
[CSS3]选择一个上级元素的最后一个同类子元素
:only-child
[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）
:only-of-type
[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）
:nth-child()
[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）
:nth-last-child()
[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）
:nth-of-type()
[CSS3]选择指定的元素（IE6-8不支持）
:nth-last-of-type()
[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）
可以使用css选择器 last-child 实现：
$("ul li:last-child"); // 指定属于父元素ul的最后一个子元素li示例代码如下
创建Html元素
<div class="box"><span>点击按钮获取每个ul下的最后一个元素：</span><br>
<div class="content">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Ralph</li>
</ul>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
<input type="button" value="获取每个ul下的最后一个元素">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
ul{padding:5px 25px;border:2px dashed #cc6699;}
red{color:red;}
编写jquery代码
$(function(){$(":button")click(function() {
$("ul li:last-child")addClass('red'); // 设置样式
str = $("ul li:last-child")map(function(){ // 获取最后一个锂元素的内容
return $(this)text();
})get()join(',');
alert(str)
});
})
观察效果
初始状态
点击按钮后效果
1、JQuery的核心的一些方法
each(callback) '就像循环
$("Element")length; ‘元素的个数，是个属性
$("Element")size(); '也是元素的个数，不过带括号是个方法
$("Element")get(); ‘某个元素在页面中的集合，以数组的形式存储
$("Element")get(index); '功能和上面的相同，index表示第几个元素，数组的下标
$("Element")get()reverse(); ‘把得到的数组方向
$("Element1")index($("Element2")); '元素2在元素1中的索引值是。
2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)
$("") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") '获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用
$("input[name='username']") 获得input标签中name='userName'的元素对象 常用
$("abc") ' 获得样式class的名字是abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a b p") 'ID号是a的并且使用了 b样式的 所有的p元素
3、层级元素获取
$("Element1 Element2 Element3 ") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素
4、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“）'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素
5、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
6、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute = youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][]") '符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
7、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt
8、表单对象获取
$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域，例如
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素，作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
9、元素属性的设置与移除
$("Element")attr(name) '取得第一个匹配的属性值，比如$("img")attr("src")
$("Element"attr(key,value)") '某一个元素设置属性
$("Element"attr({key:value,key1:value,})) ‘为某个元素一次性设置多个属性
$("Element")attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element")removeAttr(name)//移除某一个属性
怎么让 子节点不随父节点缩放
方法/步骤
当父节点旋转时，子节点旋转，父节点缩放时，子节点缩放。其实里面的计算原理很简单，就是父节点矩阵乘以子节点矩阵得到最终矩阵。
怎么让 子节点不随父节点缩放
其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。
怎么让 子节点不随父节点缩放
使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。为了不显示不必须的换行的空格，我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。
怎么让 子节点不随父节点缩放
使用firstElementChild来获取第一个子元素的时候，这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。
怎么让 子节点不随父节点缩放
lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余。
怎么让 子节点不随父节点缩放
在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。
<img id="selectsearch-icon" src=">
CSS中没有针对最后一个子元素的选择器，但有第一个（:first-child），
如果你能确定span后只有这一个a标签的话可以使用相邻兄弟选择器（span + a {} ），兼容性有待测试，没这么用过。
具体可参考w3school中CSS 选择器的介绍：
>
以上就是关于javascript如何表示根节点全部的内容，包括:javascript如何表示根节点、D3.js 选择、css中如何获取dom元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）